相关文章
网站设计让广告代码不再影响你的网页加载速度
网站制作总结：网站优化中关于META标签的常用方法
网站建设Fireworks用陨石背景打造飞火连天
网站设计网页设计三部曲之三:艺术处理原则
北京网站设计如何制作GBK与Unicode的对照表
网站建设让我们策划设计一个好网站
北京网站设计Photoshop简单打造逼真的火焰
网站建设网页背景设计全攻略
北京网站制作网页特效：滑动展开与折叠效果
北京网站设计javascript实用技巧集锦(1)
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网页设计 >> 北京网站设计www.qitongnet.com弹出窗口网页特效代码集锦
北京网站设计www.qitongnet.com弹出窗口网页特效代码集锦
 |
轻松玩转弹出窗口代码
www.qitongnet.com
【1、最基本的弹出窗口代码】 www.qitongnet.com
其实代码非常简单：
<SCRIPT LANGUAGE="javascript"> 北京网站制作
<!-- 网页设计
window.open ('page.html') 网页设计
--> 北京网站设计
</SCRIPT>
因为这是一段javascripts代码，所以它们应该放在<SCRIPT LANGUAGE="javascript">标签和 北京网站制作
</script>之间。<!-- 和 -->是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中 网页设计
的代码作为文本显示出来。要养成这个好习惯啊。 网站制作
window.open ('page.html') 用于控制弹出新的窗口page.html，如果page.html不与主窗口在 企通互联
同一路径下，前面应写明路径，绝对路径(http://)和相对路径(../)均可。 企通互联
用单引号和双引号都可以，只是不要混用。 网站制作
这一段代码可以加入HTML的任意位置，<head>和</head>之间可以，<body>间</body>也可以， 北京网站设计
越前越早执行，尤其是页面代码长，又想使页面早点弹出就尽量往前放。
www.qitongnet.com
【2、经过设置后的弹出窗口】 网站制作
下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。我们来定制这个 北京网站建设
弹出的窗口的外观，尺寸大小，弹出的位置以适应该页面的具体情况。
<SCRIPT LANGUAGE="javascript"> 网站制作
<!-- www.qitongnet.com
window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, www.qitongnet.com
toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no') 北京网站设计
//写成一行 北京网页设计
--> 北京网站设计
</SCRIPT>
参数解释： 网站设计
<SCRIPT LANGUAGE="javascript"> js脚本开始； www.qitongnet.com
window.open 弹出新窗口的命令； 企通互联
'page.html' 弹出窗口的文件名； 北京网站建设
'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替； 企通互联
height=100 窗口高度； 网页设计
width=400 窗口宽度； 网站设计
top=0 窗口距离屏幕上方的象素值； 网站建设
left=0 窗口距离屏幕左侧的象素值； 北京网站制作
toolbar=no 是否显示工具栏，yes为显示； 网站建设
menubar，scrollbars 表示菜单栏和滚动栏。 网站设计
resizable=no 是否允许改变窗口大小，yes为允许； 网站建设
location=no 是否显示地址栏，yes为允许； www.qitongnet.com
status=no 网站建设是否显示状态栏内的信息（通常是文件已经打开），yes为允许； 网页设计 企通互联
</SCRIPT> js脚本结束
北京网站设计
【3、用函数控制弹出窗口】 网站制作
下面是一个完整的代码。
<html> 网站制作
<head> 网站设计
<script LANGUAGE="JavaScript"> 北京网站建设
<!-- 企通互联
function openwin() { 北京网站制作
window.open ("page.html", "newwindow", "height=100, width=400, toolbar=no, 北京网页设计
menubar=no, scrollbars=no, resizable=no, location=no, status=no") 北京网站设计
//写成一行 网站设计
} 网站制作
//--> 北京网页设计
</script> 网站制作
</head> 北京网站建设
<body onload="openwin()"> 北京网站建设
..任意的页面内容... 网站建设
</body> 网站建设
</html>
这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。 网站建设
怎么调用呢？ 企通互联
方法一：<body onload="openwin()"> 浏览器读页面时弹出窗口； 北京网站建设
方法二：<body onunload="openwin()"> 浏览器离开页面时弹出窗口； 北京网站制作
方法三：用一个连接调用： www.qitongnet.com
<a href="注意：使用的“ 方法四：用一个按钮调用： 北京网页设计
<input type="button" onclick="openwin()" value="打开窗口">
网站制作
【4、同时弹出2个窗口】 网站设计
对源代码稍微改动一下：
<script LANGUAGE="JavaScript"> 北京网站设计
<!-- 北京网站制作
function openwin() { 北京网站建设
window.open ("page.html", "newwindow", "height=100, width=100, top=0, 北京网站设计
left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no") 北京网站设计
//写成一行 网页设计
window.open ("page2.html", "newwindow2", "height=100, width=100, top=100, 网站制作
left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, 北京网站制作
status=no") 企通互联
//写成一行 北京网站建设
} 网站建设
//--> 北京网页设计
</script>
为避免弹出的2个窗口覆盖，用top和left控制一下弹出的位置不要相互覆盖即可。最后用上面 北京网站建设
说过的四种方法调用即可。 网站设计
注意：2个窗口的name(newwindows和newwindow2)不要相同，或者干脆全部为空。OK？
北京网站建设
【5、主窗口打开文件1.htm，同时弹出小窗口page.html】 www.qitongnet.com
如下代码加入主窗口<head>区：
<script language="javascript"> 网站制作
<!-- 北京网站建设
function openwin() { 网站设计
window.open("page.html","","width=200,height=200") 北京网站制作
} 北京网站建设
//--> 网站制作
</script>
加入<body>区： 北京网站制作
<a href="1.htm" onclick="openwin()">open</a>即可。
北京网站建设
【6、弹出的窗口之定时关闭控制】 北京网页设计
下面我们再对弹出的窗口进行一些控制，效果就更好了。如果我们再将一小段代码加入弹出的 网页设计
页面(注意是加入到page.html的HTML中，可不是主页面中，否则...)，让它10秒后自动关闭是不 北京网站建设
是更酷了？ 网站设计 北京网站建设
首先，将如下代码加入page.html文件的<head>区：
<script language="JavaScript"> 网页设计
function closeit() { 网站制作
setTimeout("self.close()",10000) //毫秒 网页设计
} 北京网页设计
</script>
然后，再用<body onload="closeit()"> 这一句话代替page.html中原有的<BODY>这一句就可 网站制作
以 北京网站建设
了。 北京网站设计(这一句话千万不要忘记写啊！这一句的作用是调用关闭窗口的代码，10秒钟后就自行关闭 北京网站建设
该 北京网站制作
窗口。)
网站建设
【7、在弹出窗口中加上一个关闭按钮】 网站建设
<FORM> 北京网站建设
<INPUT TYPE='BUTTON' VALUE='关闭' onClick='window.close()'> 网站制作
</FORM>
呵呵，现在更加完美了！
网站设计
【8、内包含的弹出窗口-一个页面两个窗口】 北京网页设计
上面的例子都包含两个窗口，一个是主窗口，另一个是弹出的小窗口。 北京网站制作
通过下面的例子，你可以在一个页面内完成上面的效果。
<html> 网站建设
<head> 企通互联
<SCRIPT LANGUAGE="JavaScript"> 北京网站制作
function openwin() www.qitongnet.com
{ 北京网站制作
OpenWindow=window.open("", "newwin", "height=250, 网页设计
width=250,toolbar=no,scrollbars="+scroll+",menubar=no"); 北京网站设计
//写成一行 北京网站设计
OpenWindow.document.write("<TITLE>例子</TITLE>") 北京网站建设
OpenWindow.document.write("<BODY BGCOLOR=OpenWindow.document.write("<h1>h*ll o! 北京网页设计
</h1>") 北京网站设计
OpenWindow.document.write("New window opened!") 网页设计 网页设计
OpenWindow.document.write("</BODY>") 北京网站设计
OpenWindow.document.write("</HTML>") 网页设计
OpenWindow.document.close() 北京网页设计
} 网站设计
</SCRIPT> 企通互联
</head> 网站制作
<body> 网页设计
<a href="<input type="button" onclick="openwin()" value="打开窗口"> 网站建设
</body> 企通互联
</html>
看看 OpenWindow.document.write()里面的代码不就是标准的HTML 网站制作吗？只要按照格式写更多的 网站制作
行即可。千万注意多一个标签或少一个标签就会出现错误。记得用OpenWindow.document.close 网站设计
() 北京网站设计
结束啊。
北京网站设计
【9、终极应用--弹出的窗口之Cookie控制】 网页设计
回想一下，上面的弹出窗口虽然酷，但是有一点小毛病(沉浸在喜悦之中，一定没有发现吧？) www.qitongnet.com北京网站建设
比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页)，那么每次刷新这个页面，窗口 www.qitongnet.com
都会弹出一次，是不是非常烦人？:-( 网站设计
有解决的办法吗？Yes! Follow me. 网站制作
我们使用cookie来控制一下就可以了。 北京网站建设
首先，将如下代码加入主页面HTML的<HEAD>区：
<script> 北京网站制作
function openwin(){ 北京网站设计
window.open("page.html","","width=200,height=200") 网站建设
} 网页设计
function get_cookie(Name) { www.qitongnet.com
var search = Name + "=" 北京网页设计
var returnvalue = ""; 网站建设
if (documents .cookies .length > 0) { 企通互联
offset = documents .cookies .indexOf(search) 网站设计
if (offset != -1) { 北京网页设计
offset += search.length 企通互联
end = documents .cookies .indexOf(";", offset); 北京网站建设
if (end == -1) 企通互联
end = documents .cookies .length; 北京网页设计
returnvalue=unescape(documents .cookies .substring(offset, end)) 企通互联
} 北京网站建设
} 北京网页设计
return returnvalue; 北京网页设计
}
function loadpopup(){ 网站建设
if (get_cookie('popped')==''){ 北京网站制作
openwin() 北京网页设计
documents .cookies ="popped=yes" 北京网页设计 北京网站建设
} 网站建设
}
</script>
然后，用<body onload="loadpopup()">（注意不是openwin而是loadpop啊！）替换主页面中 北京网站建设
原 企通互联
有的<BODY>这一句即可。你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出 网站设计
了。真正的Pop-Only-Once！
写到这里弹出窗口的制作和应用技巧基本上算是完成了，俺也累坏了，一口气说了这么多，希 北京网页设计
望对正在制作网页的朋友有所帮助俺就非常欣慰了。 网站建设
需要注意的是，JS脚本中的的大小写最好前后保持一致。
网页设计
上一篇：北京网页设计javascript使图片加载进度实时显示
下一篇：北京网站设计限量版广告 1个IP一天只弹一次的AD代码