当前位置：首页 -> 网页设计 -> HTML/CSS -> 弹出窗口代码集萃

弹出窗口代码集萃

时间： 2021-07-31 作者：daque

常常上钩的伙伴大概到过如许少许网站，一加入首页连忙会弹出一个窗口，大概按一个链接或按钮弹出，常常在这个窗口里会表露少许提防事变、版权消息、劝告、欢送光临之类的话大概作家想要更加提醒的消息。本来创造如许的页面特殊简单，只有往该页面包车型的士html里介入几段javascript代码即可实行。底下我就带你领会它的神秘。【最基础的弹出窗口代码】本来代码特殊大略： <script language="javascript">  </script> 由于这是一段javascript代码，以是它们该当放在<script language ="javascript">标签和</script>之间。是对少许本子低的欣赏器起效率，在那些老欣赏器中即使不扶助javascript，不会将标签中的代码动作文本表露出来。 window.open ('page.html')用来遏制弹出新的窗口page.html，即使page.html不与主窗口在同一路途下，前方应写明路途，一致路途(http://)和对立路途(../)均可。用单引号和双引号都不妨，不过不要混用。这一段代码不妨介入html的大肆场所，介入到<head>和</head>之间也不妨，场所越靠前实行越早，更加是页面代码较长时，又想使页面早点弹出就尽管往前放。【过程树立后的弹出窗口】底下再说一说弹出窗口表面的树立。只有再往上头的代码中加一点货色就不妨了。咱们来定制这个弹出窗口的表面、尺寸巨细、弹出场所以符合该页面包车型的士简直情景。 <script language="javascript:>  </script> 参数证明： <script language="javascript"> js剧本发端； window.open 弹出新窗口的吩咐； page.html 弹出新窗口的文献名； newwindow 弹出窗口的名字（不是文献名），可用空 ″包办； height=100 窗口莫大； top=0 窗口隔绝屏幕上方的像素值； left=0 窗口隔绝屏幕左侧的像素值； toolbar=no 能否表露东西栏，yes为表露； menubar,scrollbars 表白菜单栏和震动栏； resizable=no 能否承诺变换窗口巨细，yes为承诺； location=no 能否表露地方栏，yes为承诺； status=no 能否表露状况栏内的消息（常常是文献仍旧翻开），yes为承诺； </script> js剧本中断。【用因变量遏制弹出窗口】底下是一个完备的代码。 <html> <head> <script language="javascript">  </script> </head> <body onload="openwin()"> ...大肆的页面实质... </body> </html> 这边设置了一个因变量openwin(),因变量实质即是翻开一个窗口。在挪用它之前没有任何用处。如何挪用呢？本领一：<body onload="openwen()"> 欣赏器读页面时弹出窗口；本领二：<body onunload="openwen()"> 欣赏器摆脱页面时弹出窗口；本领三：用一个贯穿挪用：<a href="#" onclick="openwin()">翻开一个窗口</a> 提防：运用的"#"是虚贯穿。本领四：用一个按钮挪用：<input type="button" onclick="openwin()" value="翻开窗口"> 【主窗口翻开文献1.htm，同声弹出小窗口page.html】将如次代码介入主窗口<head>区： <script language="javascript">  </script> 介入<body>区：<a href="1.htm" onclick="openwin()">open</a>即可。【弹出的窗口之准时封闭遏制】底下咱们再对弹出窗口举行少许遏制，功效就更好了。即使咱们再将第一小学段代码介入弹出的页面（提防是介入到page.html的html中，可不是网页面中，要不…），让它在10秒钟后机动封闭是否更酷了？开始，将如次代码介入page.html文献的<head>区： <script language="javascript"> function closeit() { settimeout("self.close()",10000) //毫秒 } </script> 而后，再用<body onload="closeit()">这一句话包办page.html华夏有的<body>这一句就不妨了。（这一句话万万不要忘怀写啊！这一句的效率是挪用封闭窗口的代码，10秒钟后就自行封闭该窗口。）【在弹出窗口中加上一个封闭按钮】 <form> <input type='button' value='封闭' onclick='window.close()'> </form> 呵呵，此刻越发完备了！【内包括的弹出窗口——一个页面两个窗口】上头的例子都包括两个窗口，一个是主窗口，另一个是弹出的小窗口。经过底下的例子，你不妨在一个页面内实行上头的功效。 <html> <head> <script language="javascript"> function openwin() { openwindow=window.open("","newwin","height=250,width=250,toolbar=no,scrollbars="+scroll+",menubar=no";); //写成一条龙 openwindow.document.write("<title>例子</title>" ;)openwindow.document.write("<body bgcolor=#ffffff>" ;)openwindow.document.write("<h1>hello!</h1>" ;)openwindow.document.write("new window opened!" ;)openwindow.document.write("</body >" ;)openwindow.document.write("</html>" ;)openwindow.document.close() } </script> </head> <body> <a href="#" onclick="openwin()">翻开一个窗口</a> <input type="button" onclick="openwin()" value="翻开窗口"> </body> </html> 看看openwindow.document.write()内里的代码不即是规范的html吗？只有依照方法写更多的行即可。万万提防多一个标签或少一个标签城市展示缺点。记取用openwindow.document.close()中断啊。【最终运用——弹出窗口的cookie遏制】回顾一下，上头的弹出窗口固然酷，然而有一点小缺点（你沉醉在欣喜之中，确定没有创造吧？）比方你将上头的剧本放在一个须要一再过程的页面里（比方首页），那么历次革新这个页面，窗口城市弹出一次，是不利害常烦人？有处置的方法吗？yes!follow me。咱们运用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.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>这一句即可。你不妨试着革新一下这个页面或从新加入该页面，窗口再也不会弹出了。真实的pop-only-once! 写到这边，弹出窗口的创造和运用本领基础上算是讲结束，蓄意对正在创造网页的伙伴有所扶助我就特殊欣喜了。须要提防的是，js剧本中的巨细写最佳前后维持普遍。没有菜单、东西栏、地方栏的弹出窗口： <script language="javascript">  </script>

弹出窗口代码集萃

相关推荐

推荐下载

热门阅览

最新排行