下载文档原格式
,'height=500, width=600, top=0, left=24, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no'我们常常在为邮箱弹出的小提示框而感到惊讶，我们也常常为网页弹出的小提示框而感到神气，其实，这都是javascript的功劳，有了javascript的基础，其实你也可以做到下面重点介绍弹出式窗口的相关知识：1、最简单的弹出式窗口<SCRIPT LANGUAGE="javascript"><!--window.open ('pop1.html')--></SCRIPT>2、弹出有样式设置的窗口<SCRIPT LANGUAGE="javascript"><!--window.open ('pop2.html', 'popwindow', 'height=200, width=320, top=0, left=24, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')--></SCRIPT>上面的代码要写在一行上面''popwindow' 弹出窗口的标题名字;height=200 弹出窗口高度;width=320 弹出窗口宽度;top=0 弹出窗口距离屏幕上方的象素值;left=24 窗口距离屏幕左侧的象素值;toolbar=no 弹出窗口是否显示工具栏，yes为显示;menubar，scrollbars 控制弹出窗口的菜单栏和滚动栏的显示。
resizable=no 是否允许改变弹出窗口大小，yes为允许;location=no 弹出窗口是否显示地址栏，yes为允许;status=no 是否显示状态栏内的信息(通常是文件已经打开)，yes为允许;3、根据自己的需要设置窗口<script language="JavaScript">var gt = unescape('%3e');var popup = null;var over = "Launch Pop-up Navigator";popup = window.open('', 'popupnav', 'width=200,height=170,resizable=1 ,scrollbars=auto'if (popup != null) {if (popup.opener == null) {popup.opener = self;}popup.location.href = '说明窗口内容文件.html'}// --></script>*popup.location.href = '用于说明窗口内容.htm',用于设置窗口中出现的内容的文件名。
弹窗代码大全(收集)以下包括强制弹窗 24小时IP弹窗延时弹窗退弹等我们使用cookie来控制一下就可以了。
首先，将如下代码加入主页面html的<head>区：<script>function openwin(){window.open(”page.html”,”",”width=200,height=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.lengthend = 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>这一句即可。
你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出了。
真正的pop-only-once！写到这里弹出窗口的制作和应用技巧基本上算是完成了，俺也累坏了，一口气说了这么多，希望对正在制作网页的朋友有所帮助俺就非常欣慰了。
JavaScript实现弹出窗⼝效果本⽂实例为⼤家分享了JavaScript实现弹出窗⼝的具体代码，供⼤家参考，具体内容如下思路1、总体使⽤两个div，⼀个作为底层展⽰，⼀个做为弹出窗⼝；2、两个窗⼝独⽴进⾏CSS设计，通过display属性进⾏设置现实与隐藏，此处建议使⽤display属性⽽不是visibility属性，visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占⽤与未隐藏之前⼀样的空间，影响布局；3、在js内设计两个onclick事件，分别指定函数，分别为开启弹窗和关闭弹窗。
⼀、设置两个div<html><title>弹出窗⼝</title><head><meta charset="UTF-8"></head><body>// 底层div<div id="popLayer"></div>// 弹出层div<div id="popDiv"></div></body></html>⼆、对两个div进⾏独⽴CSS设置，弹出窗⼝display设为none<html><title>弹出窗⼝</title><head><meta charset="UTF-8"><style type="text/css">body{background-color: cyan;}#popDiv{display: none;background-color: crimson;z-index: 11;width: 600px;height: 600px;position:fixed;top:0;right:0;left:0;bottom:0;margin:auto;}</style></head><body>// 底层div<div id="popLayer"><button onclick="">弹窗</button></div>// 弹出层div<div id="popDiv"><div class="close">// 关闭按钮超链接<a href="" onclick="">关闭</a></div><p>此处为弹出窗⼝</p></div></body></html>三、定义并设置弹出按钮和关闭窗⼝函数<script type="text/javascript">function popDiv(){// 获取div元素var popBox = document.getElementById("popDiv");var popLayer = document.getElementById("popLayer"); // 控制两个div的显⽰与隐藏popBox.style.display = "block";popLayer.style.display = "block";}function closePop(){// 获取弹出窗⼝元素let popDiv = document.getElementById("popDiv");popDiv.style.display = "none";}</script>四、将函数设置到onclick事件中<button onclick="popDiv();">弹窗</button><a href="javascript:void(0)" onclick="closePop()">关闭</a>五、设置关闭链接CSS和pop界⾯的其余CSS<style type="text/css">/* 关闭链接样式 */#popDiv .close a {text-decoration: none;color: #2D2C3B;}/* 弹出界⾯的关闭链接 */#popDiv .close{text-align: right;margin-right: 5px;background-color: #F8F8F8;}#popDiv p{text-align: center;font-size: 25px;font-weight: bold;}</style>六、整体代码<html><title>弹出窗⼝</title><head><meta charset="UTF-8"><script type="text/javascript">function popDiv(){// 获取div元素var popBox = document.getElementById("popDiv");var popLayer = document.getElementById("popLayer"); // 控制两个div的显⽰与隐藏popBox.style.display = "block";popLayer.style.display = "block";}function closePop(){// 获取弹出窗⼝元素let popDiv = document.getElementById("popDiv");popDiv.style.display = "none";}</script><style type="text/css">body{background-color: cyan;}#popDiv{display: none;background-color: crimson;z-index: 11;width: 600px;height: 600px;position:fixed;top:0;right:0;left:0;bottom:0;margin:auto;}/* 关闭按钮样式 */#popDiv .close a {text-decoration: none;color: #2D2C3B;}/* 弹出界⾯的关闭按钮 */#popDiv .close{text-align: right;margin-right: 5px;background-color: #F8F8F8;}#popDiv p{text-align: center;font-size: 25px;font-weight: bold;}</style></head><body><div id="popLayer"><button onclick="popDiv();">弹窗</button></div><div id="popDiv"><div class="close"><a href="javascript:void(0)" onclick="closePop()">关闭</a></div><p>此处为弹出窗⼝</p></div></body></html>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
js实现网页右下角弹出窗口代码<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns=”/1999/xhtml”><head><meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /><title>JavaScript实现网页右下角弹出窗口代码</title></head><style type=”text/css”>#winpop { width:200px; height:0px; position:absolute; right:0; bottom:0; border:1px solid #666; margin:0; padding:1px; overflow:hidden; display:none;}#winpop .title { width:100%; height:22px; line-height:20px; background:#FFCC00; font-weight:bold; text-align:center; font-size:12px;}#winpop .con { width:100%; height:90px; line-height:80px; font-weight:bold; font-size:12px; color:#FF0000; text-decoration:underline; text-align:center}#silu { font-size:12px; color:#666; position:absolute; right:0; text-align:right; text-decoration:underline; line-height:22px;}.close { position:absolute; right:4px; top:-1px; color:#FFF; cursor:pointer}</style><script type=”text/javascript”>function tips_pop(){var MsgPop=document.getElementById(“winpop”);var popH=parseInt(MsgPop.style.height);//将对象的高度转化为数字if (popH==0){MsgPop.style.display=”block”;//显示隐藏的窗口show=setInterval(“changeH(…up‟)”,2);}else {hide=setInterval(“changeH(…down‟)”,2);}}function changeH(str) {var MsgPop=document.getElementById(“winpop”);var popH=parseInt(MsgPop.style.height);if(str==”up”){if (popH<=100){MsgPop.style.height=(popH+4).toString()+”px”;}else{clearInterval(show);}}if(str==”down”){if (popH>=4){MsgPop.style.height=(popH-4).toString()+”px”;}else{clearInterval(hide);MsgPop.style.display=”none”;?? //隐藏DIV}}}window.onload=function(){//加载document.getElementById(…winpop‟).style.height=‟0px‟;setTimeout(“tips_pop()”,800);//3秒后调用tips_pop()这个函数}</script><body><div id=”silu”><button onclick=”tips_pop()”>3秒后会在右下角自动弹出窗口，如果没有弹出请点击这个按钮</button></div><div id=”winpop”><div>您有新的短消息！<span onclick=”tips_pop()”>×</span></div><div>1条未读信息(</div></div></body></html>。
在弹出新窗口的多种方式关闭,父窗口弹出对话框,子窗口直接关闭("< >();<>");关闭,父窗口和子窗口都不弹出对话框,直接关闭("<>");("{ ();}");("<>");弹出窗口刷新当前页面菜单。
菜单栏,工具条,地址栏,状态栏全没有("< >('','','')<>");弹出窗口刷新当前页面("< >('')<>");("<>('','');<>");弹出提示窗口跳到页(在一个窗口中)(" < >('注册成功')'';<> ");关闭当前子窗口,刷新父窗口("<>();<>");("<>()();<>");子窗口刷新父窗口("<>;<>");("<>'';<>");弹出提示窗口.确定后弹出子窗口()("< ''>('发表成功！')('')<>");弹出提示窗口,确定后,刷新父窗口("<>('发表成功！');<>");弹出相同的一页< "" "" "()">("'" "';");< ""><('', '', ', , , , , , , , ') 这句要写成一行><>参数解释：< ""> 脚本开始；弹出新窗口的命令；'' 弹出窗口的文件名；'' 弹出窗口的名字（不是文件名），非必须，可用空''代替；窗口高度；窗口宽度；窗口距离屏幕上方的象素值；窗口距离屏幕左侧的象素值；是否显示工具栏，为显示；，表示菜单栏和滚动栏。
自制网页右下角浮动窗口效果图如下图所示：一．在需要添加浮动窗口的页面的head中引入css代码，代码如下：<!-- 浮动窗口样式css begin --><style type="text/css">#msg_win{border:1px solid#A67901;background:#EAEAEA;width:240px;position:absolute;right:0;font-size:1 2px;font-family:Arial;margin:0px;display:none;overflow:hidden;z-index:99;} #msg_win.icos{position:absolute;top:2px;*top:0px;right:2px;z-index:9;}.icos a{float:left;color:#833B02;margin:1px;text-align:center;font-weight:bold; width:14px;height:22px;line-height:22px;padding:1px;text-decoration:none;font-f amily:webdings;}.icos a:hover{color:#fff;}#msg_title{background:#BBDEF6;border-bottom:1px solid#A67901;border-top:1px solid #FFF;border-left:1px solid#FFF;color:#000;height:25px;line-height:25px;text-indent:5px;}#msg_content{margin:5px;margin-right:0;width:230px;height:126px;overflo w:hidden;}</style><!-- 浮动窗口样式css end -->二．在需要添加浮动窗口的页面的head中添加js代码，代码如下：window.onload=function(){setTimeout('refresh10()',1000*60*10) ;}function refresh10(){window.location.reload();}三．在需要添加浮动窗口的页面的尾部添加js代码，代码如下：<!-- 浮动窗口js，必须要放置到最后begin--><script language="javascript">var Message={set: function() {//最小化与恢复状态切换var set=this.minbtn.status == 1?[0,1,'block',this.char[0],'最小化']:[1,0,'none',this.char[1],'展开'];this.minbtn.status=set[0];this.win.style.borderBottomWidth=set[1];this.content.style.display =set[2];this.minbtn.innerHTML =set[3]this.minbtn.title = set[4];this.win.style.top = this.getY().top;},close: function() {//关闭this.win.style.display = 'none';window.onscroll = null;},setOpacity: function(x) {//设置透明度var v = x >= 100 ? '': 'Alpha(opacity=' + x + ')';this.win.style.visibility = x<=0?'hidden':'visible';//IE有绝对或相对定位内容不随父透明度变化的bugthis.win.style.filter = v;this.win.style.opacity = x / 100;},show: function() {//渐显clearInterval(this.timer2);var me = this,fx = this.fx(0, 100, 0.1),t = 0;this.timer2 = setInterval(function() {t = fx();me.setOpacity(t[0]);if (t[1] == 0) {clearInterval(me.timer2) }},10);},fx: function(a, b, c) {//缓冲计算var cMath = Math[(a - b) > 0 ? "floor": "ceil"],c = c || 0.1;return function() {return [a += cMath((b - a) * c), a - b]}},getY: function() {//计算移动坐标var d = document,b = document.body, e = document.documentElement;var s = Math.max(b.scrollTop, e.scrollTop);var h =/BackCompat/i.test(patMode)?b.clientHeight:e.clientHeight;var h2 = this.win.offsetHeight;return {foot: s + h + h2 + 2+'px',top: s + h - h2 - 2+'px'}},moveTo: function(y) {//移动动画clearInterval(this.timer);var me = this,a = parseInt(this.win.style.top)||0;var fx = this.fx(a, parseInt(y));var t = 0 ;this.timer = setInterval(function() {t = fx();me.win.style.top = t[0]+'px';if (t[1] == 0) {clearInterval(me.timer);me.bind();}},10);},bind:function (){//绑定窗口滚动条与大小变化事件var me=this,st,rt;window.onscroll = function() {clearTimeout(st);clearTimeout(me.timer2);me.setOpacity(0);st = setTimeout(function() {me.win.style.top = me.getY().top;me.show();},600);};window.onresize = function (){clearTimeout(rt);rt = setTimeout(function() {me.win.style.top = me.getY().top},100);}},init: function() {//创建HTMLfunction $(id) {return document.getElementById(id)};this.win=$('msg_win');var set={minbtn: 'msg_min',closebtn: 'msg_close',title:'msg_title',content: 'msg_content'};for (var Id in set) {this[Id] = $(set[Id])};var me = this;this.minbtn.onclick = function() {me.set();this.blur()};this.closebtn.onclick = function() {me.close()};this.char=erAgent.toLowerCase().indexOf('firefox')+1?['_','::','×']:['0','2','r'];//FF不支持webdings字体this.minbtn.innerHTML=this.char[0];this.closebtn.innerHTML=this.char[2];setTimeout(function() {//初始化最先位置me.win.style.display = 'block';me.win.style.top = me.getY().foot;me.moveTo(me.getY().top);},0);return this;}};Message.init();</script><!-- 浮动窗口js end-->四．Body部分添加浮动床的代码，代码如下：<!-- 浮动窗口html代码begin --><hr><div id="msg_win"style="display:block;top:490px;visibility:visible;opacity:1;"> <div class="icos"><a id="msg_min"title="最小化"href="javascript:void0">_</a><a id="msg_close"title="关闭"href="javascript:void 0">×</a></div><div id="msg_title">设备运行情况--></div><div id="msg_content"style="overflow:auto;height:150px;width:100%;white-s pace:nowrap"><s:property value="devRun"escape="false"/>（自己要显示的内容）</div></div><!-- 浮动窗口html代码end -->。
经常上网的朋友可能会到过这样一些网站，一进入首页立刻会弹出一个窗口，或者按一个连接或按钮弹出，通常在这个窗口里会显示一些注意事项、版权信息、警告、欢迎光顾之类的话或者作者想要特别提示的信息。
其实制作这样的页面效果非常的容易，只要往该页面的HTML里加入几段javascript代码即可实现。
下面俺就带您剖析它的奥秘。
【1、最基本的弹出窗口代码】其实代码非常简单：<SCRIPT LANGUAGE=”javascript”><!–window.open (‘page.html’)–></SCRIPT>因为着是一段javascripts代码，所以它们应该放在<SCRIPT LANGUAGE=”javascr ipt”>标签和</script>之间。
<!–和–>是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示出来。
要养成这个好习惯啊。
window.open (‘page.html’) 用于控制弹出新的窗口page.html，如果page.html 不与主窗口在同一路径下，前面应写明路径，绝对路径(http://)和相对路径(.. /)均可。
用单引号和双引号都可以，只是不要混用。
这一段代码可以加入HTML的任意位置，<head>和</head>之间可以，<body>间</b ody>也可以，越前越早执行，尤其是页面代码长，又想使页面早点弹出就尽量往前放。
【2、经过设置后的弹出窗口】下面再说一说弹出窗口的设置。
只要再往上面的代码中加一点东西就可以了。
我们来定制这个弹出的窗口的外观，尺寸大小，弹出的位置以适应该页面的具体情况。
<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>参数解释：<SCRIPT LANGUAGE=”javascript”> js脚本开始；window.open 弹出新窗口的命令；‘page.html’弹出窗口的文件名；‘newwindow’弹出窗口的名字（不是文件名），非必须，可用空”代替；height=100 窗口高度；width=400 窗口宽度；top=0 窗口距离屏幕上方的象素值；left=0 窗口距离屏幕左侧的象素值；toolbar=no 是否显示工具栏，yes为显示；menubar，scrollbars 表示菜单栏和滚动栏。
javascript弹出和关闭网页窗口代码大全javascript弹出和关闭网页窗口代码大全//关闭,父窗口和子窗口都不弹出对话框,直接关闭this.Response.Write("<script> ");this.Response.Write("{top.opener =null;top.close();}");this.Response.Write("</script> ");//关闭,父窗口弹出对话框,子窗口直接关闭this.Response.Write("<script language=javascript> window.close();</script> ");//弹出窗口刷新当前页面width=200 height=200菜单。
菜单栏,工具条,地址栏,状态栏全没有this.Response.Write("<script language=javascript> window.open('rows.aspx','newwindow','width=200,height=200') </script> ");//弹出窗口刷新当前页面this.Response.Write("<script language=javascript> window.open('rows.aspx')</script> ");this.Response.Write("<script>window.open('WebForm2.aspx','_blank');</script> ");//弹出提示窗口跳到webform2.aspx页(在一个IE窗口中)this.Response.Write(" <script language=javascript> alert('注册成功');window.window.location.href='WebForm2.aspx';</script> ");//关闭当前子窗口,刷新父窗口this.Response.Write("<script>window.opener.location.href=window.opener.location.href;wind ow.close();</script> ");this.Response.Write("<script>window.opener.location.replace(window.opener.document.referr er);window.close();</script> ");//子窗口刷新父窗口this.Response.Write("<script>window.opener.location.href=window.opener.location.href;</scri pt> ");this.Response.Write("<script>window.opener.location.href='WebForm1.aspx';</script> ");//弹出提示窗口.确定后弹出子窗口(WebForm2.aspx)this.Response.Write("<script language='javascript'> alert('发表成功！');window.open('WebForm2.aspx')</script> ");//弹出提示窗口,确定后,刷新父窗口this.Response.Write("<script> alert('发表成功！');window.opener.location.href=window.opener.location.href;</s cript> ");//弹出相同的一页<INPUT type="button" value="Button" onclick="javascript:window.open(window.location.href)">//Response.Write("parent.mainFrameBottom.location.href='y ourwebform.aspx?temp=" +str+"';");<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=n o, status=no') //这句要写成一行--></SCRIPT>参数解释：<SCRIPT LANGUAGE="javascript"> js脚本开始；window.open 弹出新窗口的命令；'page.html' 弹出窗口的文件名；'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替；height=100 窗口高度；width=400 窗口宽度；top=0 窗口距离屏幕上方的象素值；left=0 窗口距离屏幕左侧的象素值；toolbar=no 是否显示工具栏，yes为显示；menubar，scrollbars 表示菜单栏和滚动栏。
javascript弹出窗⼝代码⼤全如何利⽤⽹页弹出各种形式的窗⼝，我想⼤家⼤多都是知道些的，但那种多种多样的弹出式窗⼝是怎么搞出来的，今天找了⼀篇好⽂学习了： 1.弹启⼀个全屏窗⼝<html><body onload="window.open('','example01','fullscreen');">;<b></b></body></html> 2.弹启⼀个被F11化后的窗⼝<html><body onload="window.open(''','example02','channelmode');">;<b></b></body></html> 3.弹启⼀个带有收藏链接⼯具栏的窗⼝<html><body onload="window.open('','example03','width=400,height=300,directories');"><b></b></body></html> 4.⽹页对话框<html><SCRIPT LANGUAGE="javascript"><!--showModalDialog(','example04','dialogWidth:400px;dialogHeight:300px;dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes')//--></SCRIPT><b></b></body></html><html><SCRIPT LANGUAGE="javascript"><!--showModelessDialog(','example05','dialogWidth:400px;dialogHeight:300px;dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes')//--></SCRIPT><b></b></body></html> showModalDialog()或是showModelessDialog() 来调⽤⽹页对话框，⾄于showModalDialog()与showModelessDialog()的区别，在于showModalDialog()打开的窗⼝（简称模式窗⼝），置在⽗窗⼝上，必须关闭才能访问⽗窗⼝(建议尽量少⽤，以免招⼈反感)；showModelessDialog()dialogHeight: iHeight 设置对话框窗⼝的⾼度。
