[转贴]弹出窗口详解
一、 基本变化
<script language="javascript">
<!--
window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no,resizable=no,location=no, status=no')
//写成一行
-->
</script>
参数解释:
window.open 弹出新窗口的命令;
'page.html' 弹出窗口的文件名;
'newwindow' 弹出窗口的名字(不是文件名),非必须,可用空''代替;
100 窗口高度;
width=400 窗口宽度;
top=0 窗口距离屏幕上方的象素值;
left=0 窗口距离屏幕左侧的象素值;
toolbar=no 是否显示工具栏,yes为显示;
menubar,scrollbars 表示菜单栏和滚动栏。
resizable=no 是否允许改变窗口大小,yes为允许;
location=no 是否显示地址栏,yes为允许;
status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许;
二、 弹启一个全屏窗口
加入fullscreen
<script language="javascript">
<!--
window.open ('page.html', 'newwindow', 'fullscreen') //全屏了,自然其他条件就都失效了
-->
</script>
三、 打开一个和按f11所见到的一样的窗口
加入channelmode
<script language="javascript">
<!--
window.open ('page.html', 'newwindow', channelmode)
-->
</script>
四、 打开一个连标题栏都没有的窗口(无标题、最小、最大、以及关闭按钮)
<html><head>
<meta http-equiv=content-type content="text/html; charset=gb2312">
<script language="javascript">
function unload()
{
var popupsizex=200; //窗口的宽度
var popupsizey=166; //窗口的高度
var popuplocationx=2;//距离左边的距离 相当于 left
var popuplocationy=2;//距离顶端的距离 相当于 top
// url of the popup
var popupurl="http://www.33d9.com/default.asp";; //打开页面的路径
// ** 下面的就不要随便改了 ***
splashwin = window.open("",'x','fullscreen=1, ,scrollbars=auto,resizable=1');
splashwin.blur(); // hide while updating
window.focus();
splashwin.resizeto(popupsizex,popupsizey);
splashwin.moveto(popuplocationx,popuplocationy);
splashwin.location=popupurl;
}
// end
unload();
</script>
</head>
<body></body></html>
看看,什么效果? 如果把resizable 设为0 scrollbars = no 呢?
五、 没有最大化按纽的窗口
其实也就是象软件的“关于我们”的那个窗口一样,下面就是用对话框窗口来实现它。
showmodaldialog()以及showmodelessdialog()
1.用showmodaldialog()
<html>
<script language="javascript">
<!--
showmodaldialog('http://www.fwcn.com','example04','dialogwidth:400px;dialogheight:300px;dialogleft:200px;dialogtop:150px;center:yes;help:yes;resizable:yes;status:yes')
//-->
</script>
<b>www.fwcn.com</b>
</body>
</html>
2.用showmodelessdialog()
<html>
<script language="javascript">
<!--
showmodelessdialog('http://www.fwcn.com','example05','dialogwidth:400px;dialogheight:300px;dialogleft:200px;dialogtop:150px;center:yes;help:yes;resizable:yes;status:yes')
//-->
</script>
<b>www.fwcn.com</b>
</body>
</html>
至于showmodaldialog()与showmodelessdialog()的区别,在于showmodaldialog()打开的窗口(简称模式窗口),置在父窗口上,必须关闭才能访问父窗口(建议尽量少用,以免招人反感);showmodelessdialog()(简称无模式窗口),打开后不必关闭也可访问父窗口打开的窗口。
现在我将这里的一些参数说明一下。
dialogheight: iheight 设置对话框窗口的高度。
dialogwidth: iwidth 设置对话框窗口的宽度。
dialogleft: ixpos 设置对话框窗口相对于桌面左上角的left位置。
dialogtop: iypos 设置对话框窗口相对于桌面左上角的top位置。
center: {yes | no | 1 | 0 } 指定是否将对话框在桌面上居中,默认值是“yes”。
help: {yes | no | 1 | 0 } 指定对话框窗口中是否显示上下文敏感的帮助图标。默认值是“yes”。
resizable: {yes | no | 1 | 0 } 指定是否对话框窗口大小可变。默认值是“no”。
status: {yes | no | 1 | 0 } 指定对话框窗口是否显示状态栏。对于非模式对话框窗口,默认值是“yes”;对于模式对话框窗口,默认值是 “no”。
六、 弹出n 个窗口
这很简单,只要执行n 次window.open()就行了,当然一定要给每个窗口起不同的名字,
还有,设置一下left和top,避免重叠。
七、 刷新之后就不再弹出窗口
我们使用cookie来控制一下就可以了。
首先,将如下代码加入主页面html的<head>区:
<script>
function openwin(){
window.open("page.html","","width=200,200")
}
function get_cookie(name) {
var search = name + "="
var returnvalue = "";
if (documents.cookie.length > 0) {
offset = documents.cookie.indexof(search)
if (offset != -1) {
offset += search.length
end = documents.cookie.indexof(";", offset);
if (end == -1)
end = documents.cookie.length;
returnvalue=unescape(documents.cookie.substring(offset, end))
}
}
return returnvalue;
}
function loadpopup(){
if (get_cookie('popped')==''){
openwin()
documents.cookie="popped=yes"
}
}
</script>
然后,用<body onload="loadpopup()">(注意不是openwin而是loadpop啊!) 替换主页面中原有的<body>这一句即可。你可以试着刷新一下这个页面或重新进入该页面,窗口再也不会弹出了。
八、 让弹出窗口适应里面图片的大小
很多时候我们需要提供这样的功能给访问者:当访问者点击页面中的缩略图时,其对应的全尺寸图片将显示在一个新的弹出窗口中供访问者查看。
实现此功能的最简单作法是用以下html代码创建一个图像链接:
<a href="fullsize.jpg" target="_blank"><img src="small.jpg"></a>
其中<a>标记的href属性指定全尺寸图片的url,target属性设置为_blank指定在新窗口中显示该图片;<img>标记的src属性指定缩略图的url。