弹出窗口代码大全

您现在的位置：圆点视线 >> 教程 >> 网页设计 >> 网页制作技巧 >> 文章正文

[推荐]弹出窗口代码大全

★★★

弹出窗口代码大全

作者：hairan 　文章来源：新浪学院　点击数：　更新时间：2007-7-7 15:31:58　

　页面功能：【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

【字体：小大】

如何利用网页弹出各种形式的窗口，我想大家大多都是知道些的，但那种多种多样的弹出式窗口是怎么搞出来的，我们今天就来学习一下：

　　1.弹启一个全屏窗口

<html>
<body onload="window.open('http://www.kunde58.com','example01','fullscreen');">;
<b>www.kunde58.com</b>
</body>
</html>

　　2.弹启一个被F11化后的窗口

<html>
<body onload="window.open(''http://www.kunde58.com','example02','channelmode');">;
<b>www.kunde58.com</b>
</body>
</html>

　　3.弹启一个带有收藏链接工具栏的窗口

<html>
<body onload="window.open('www.wangye8.com','example03','width=400,height=300,directories');">
<b>www.wangye8.com</b>
</body>
</html>

　　4.网页对话框

<html>
<SCRIPT LANGUAGE="javascript">

</SCRIPT>
<b>www.wangye8.com</b>
</body>
</html>

<html>
<SCRIPT LANGUAGE="javascript">

</SCRIPT>
<b>http://www.wangye8.com</b>
</body>
</html>

　　showModalDialog()或是showModelessDialog() 来调用网页对话框，至于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”。

5、其他弹出窗口代码

经常上网的朋友可能到过这样一些网站，一进入首页立刻会弹出一个窗口，或者按一个链接或按钮弹出，通常在这个窗口里会显示一些注意事项、版权信息、警告、欢迎光顾之类的话或者作者想要特别提示的信息。其实制作这样的页面非常容易，只要往该页面的HTML里加入几段java script代码即可实现。下面我就带你剖析它的奥秘。

【最基本的弹出窗口代码】
其实代码非常简单：
<SCRIPT LANGUAGE="java script">

</SCRIPT>
因为这是一段java script代码，所以它们应该放在<SCRIPT LANGUAGE ="java script">标签和</script>之间。是对一些版本低的浏览器起作用，在这些老浏览器中如果不支持java script，不会将标签中的代码作为文本显示出来。
Window.open (’page.html’)用于控制弹出新的窗口page.html，如果page.html不与主窗口在同一路径下，前面应写明路径，绝对路径(http://)和相对路径(../)均可。

　【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】　文章录入：hairan 责任编辑：hairan 　【字体：小大】

上一篇文章：鼠标事件的基础和完美实现

下一篇文章：让Dreamweaver设计有色线条