收集：javascript网页精华代码--弹出窗口的制作和应用技巧

最新推荐文章于 2022-10-26 09:24:45 发布
最新推荐文章于 2022-10-26 09:24:45 发布
阅读量719 收藏
点赞数
分类专栏： 5.3-JavaScript 文章标签： javascript 浏览器 脚本 html scroll button
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/elifefly/article/details/2767802
版权

 【1、普通的弹出窗口】

  1. <SCRIPT LANGUAGE=javascript> 
  2. <!-- 
  3. window.open ('page.html') 
  4. --> 
  5. </SCRIPT> 

<!-- 和 -->是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示

出来。用单引号和双引号都可以，只是不要混用。

 

【2、经过设置后的弹出窗口】

  1. <SCRIPT LANGUAGE=javascript> 
  2. <!-- 
  3. window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, 
  5. menubar=no, scrollbars=no, resizable=no,location=no, status=no') 
  6. //写成一行 
  7. --> 
  8. </SCRIPT> 

参数解释：

<SCRIPT LANGUAGE=javascript> js脚本开始；
window.open 弹出新窗口的命令；
'page.html' 弹出窗口的文件名；
'newwindow' 弹出窗口的名字，非必须，可用空''代替；
height=100 窗口高度；
width=400 窗口宽度；
top=0 窗口距离屏幕上方的象素值；
left=0 窗口距离屏幕左侧的象素值；
toolbar=no 是否显示工具栏，yes为显示；
menubar，scrollbars 表示菜单栏和滚动栏。
resizable=no 是否允许改变窗口大小，yes为允许；
location=no 是否显示地址栏，yes为允许；
status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；
</SCRIPT> js脚本结束

 

【3、用函数控制弹出窗口】

  1. 下面是一个完整的代码。 
  2. <html> 
  3. <head> 
  4. <script LANGUAGE=javascript> 
  5. <!-- 
  6. function openwin() { 
  7. window.open (page.html, newwindow, height=100, width=400, toolbar=no, menubar=no, 
  11. scrollbars=no, resizable=no, location=no, status=no) 
  12. //写成一行 
  13. } 
  14. //--> 
  15. </script> 
  16. </head> 
  17. <body οnlοad=openwin()> 
  18. ..... 
  19. </body> 
  20. </html> 
  22. 　　这里定义了一个函数openwin(),怎么调用呢？ 
  24. 　　方法一：<body οnlοad=openwin()> 浏览器读页面时弹出窗口； 
  25. 　　方法二：<body οnunlοad=openwin()> 浏览器离开页面时弹出窗口； 
  26. 　　方法三：用链接调用：        方法四：用按钮调用： 

 

【4、同时弹出2个窗口】

  1. 对源代码稍微改动一下： 
  2. <script LANGUAGE=javascript> 
  3. <!-- 
  4. function openwin() { 
  5. window.open (page.html, newwindow, height=100, width=100, top=0, left=0,toolbar=no, 
  9. menubar=no, scrollbars=no, resizable=no, location=no, status=no) 
  10. //写成一行 
  11. window.open (page2.html, newwindow2, height=100, width=100, top=100, left=100,toolbar=no, 
  13. menubar=no, scrollbars=no, resizable=no, location=no, status=no) 
  14. //写成一行 
  15. } 
  16. //--> 
  17. </script> 
  20. 　　为避免弹出的2个窗口覆盖，用top和left控制一下弹出的位置不要相互覆盖即可。最后用上面说过 
  23. 的四种方法调用即可。 
  24. 注意：2个窗口的name(newwindows和newwindow2)不要相同，或者干脆全部为空。 

 

【5、主窗口打开文件1.htm，同时弹出小窗口page.html】

 

  1. 如下代码加入主窗口<head>区： 
  4. <script language=javascript> 
  5. <!-- 
  6. function openwin() { 
  7. window.open(page.html,,width=200,height=200) 
  8. } 
  9. //--> 
  10. </script> 
  11. 加入<body>区： 
  12. <a href=http://www.mscto.com/JavaScript/1.

 

【6、弹出的窗口之定时关闭控制】

 

  1. 下面我们再对弹出的窗口进行一些控制，效果就更好了。如果我们再将一小段代码加入弹出的页面( 
  3. 注意是加入到page.html的HTML中，可不是主页面中，否则...)，让它10秒后自动关闭是不是更酷了？ 
  5. 　　首先，将如下代码加入page.html文件的<head>区： 
  6. <script language=javascript> 
  10. function closeit() { 
  15. setTimeout(self.close(),10000) //毫秒 
  18. } 
  22. </script> 
  23. 　然后，再用<body οnlοad=closeit()> 这一句话代替page.html中原有的<BODY>这一句就可以了。(这 
  27. 一句话千万不要忘记写啊！这一句的作用是调用关闭窗口的代码，10秒钟后就自行关闭该窗口。) 

 

【7、在弹出窗口中加上一个关闭按钮】

  1. <FORM> 
  2. <INPUT TYPE='BUTTON' value='关闭' onClick='window.close()'> 
  3. </FORM>

 

【8、内包含的弹出窗口-一个页面两个窗口】

  1. 通过下面的例子，你可以在一个页面内完成上面的效果。 软件开发网 www.mscto.com 
  3. <html> 
  4. <head> 
  5. <SCRIPT LANGUAGE=javascript> 
  6. function openwin() 
  7. { 
  8. OpenWindow=window.open(, newwin, height=250, 
  10. width=250,toolbar=no,scrollbars=+scroll+,menubar=no); 
  11. //写成一行 
  12. OpenWindow.document.write(<TITLE>例子</TITLE>) 
  13. OpenWindow.document.write(<BODY BGCOLOR=OpenWindow.document.write(<h1>Hello!</h1>) 
  14. OpenWindow.document.write(New window opened!) 
  15. OpenWindow.document.write(</BODY>) 
  16. OpenWindow.document.write(</HTML>) 
  17. OpenWindow.document.close() 
  18. } 
  19. </SCRIPT> 
  20. </head> 
  21. <body> 
  22. <a href=http://www.mscto.com/JavaScript/<input type=button οnclick=openwin() value=打开窗口> 
  23. </body> 
  24. </html> 
  26. 　　看看 OpenWindow.document.write()里面的代码不就是标准的HTML吗？只要按照格式写更多的行即 
  28. 可。千万注意多一个标签或少一个标签就会出现错误。记得用OpenWindow.document.close()结束啊。 
【9、弹出的窗口之Cookie控制】

 

  1. 回想一下，上面的弹出窗口虽然酷，但是有一点小毛病。比如你将上面的脚本放在一个需要频繁经 
  5. 过的页面里(例如首页)，那么每次刷新这个页面，窗口都会弹出一次，是不是非常烦人？:-( 
  6. 　　解决办法： 
  7. 　　我们使用cookie来控制一下就可以了。首先，将如下代码加入主页面HTML的<HEAD>区：
  8. <script> 
  9. function openwin(){ 
  10. window.open(page.html,,width=200,height=200) 
  11. } 
  12. function get_cookie(Name) { 
  13. var search = Name + = 
  14. var returnvalue = ; 
  15. if (documents.cookie.length > 0) { 
  16. offset = documents.cookie.indexOf(search) 
  17. if (offset != -1) { 
  18. offset += search.length 
  19. end = documents.cookie.indexOf(;, offset); 
  20. if (end == -1) 
  21. end = documents.cookie.length; 
  22. returnvalue=unescape(documents.cookie.substring(offset, end)) 
  23. } 
  24. } 
  25. return returnvalue; 
  26. } 
  31. function loadpopup(){ 
  32. if (get_cookie('popped')==''){ 
  33. openwin() 
  34. documents.cookie=popped=yes 
  35. } 
  36. } 
  38. </script> 
  42. 　　然后，用<body οnlοad=loadpopup()>（注意不是openwin而是loadpop啊！）替换主页面中原有的 
  46. <BODY>这一句即可。你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出了。真正的 
  50. Pop-Only-Once！ 
完毕。

 
elifefly
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html开网站弹窗代码大全,网页弹窗代码大全
weixin_31209173的博客
06-08 2万+
我最喜欢用这一段，简单，方便 language="javascript">1.超级弹窗代码(MYIE也照弹)focusid=setTimeout("focus();window.showModelessDialog('http://www.woxl.cn','','scroll:1;status:0;help:0;resizable:1;dialogWidth:0px;dialogHeight:0...
（js笔记）第一章了解js
最新发布
qq_40538396的博客
04-16 143
JavaScript是一种基于对象和事件驱动的脚本语言JavaScript特点1)交互、脚本语言、解释性语言2)边执行边解释JavaScript组成javaScript:ECMAScript（javaScript语法） BOM(浏览器对象模型) DOM（页面文档对象模型）为什么需要数据类型在计算机中，不同的数据所占用的存储空间不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。
打开网页自动弹出一个页面的代码分析
hwj1107的专栏
10-11 4192
前言:经常上网的朋友可能会到过这样一些网站，一进入首页立刻会弹出一个窗口，或者按一个连接或按钮弹出，通常在这个窗口里会显示一些注意事项、版权信息 、警告、欢迎光顾之类的话或者作者想要特别提示的信息。其实制作这样的页面效果非常的容易，只要往该页面的HTML里加入几段javascript代码即可实现。下面我就带您剖析它的奥秘。   　 【1、最基本的弹出窗口代码】   　　 　　   　　　　wind
网页弹出对话框的几种代码
labkill的专栏
04-15 3783
【1、最基本的弹出窗口代码】 其实代码非常简单： window.open ("page.html") --> 因为着是一段javascripts代码，所以它们应该放在标签和之间。是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。 window.open ("page.html") 用于控制弹出新的窗口page.h
网页弹出窗口代码汇总
05-07 1689
【1、最基本的弹出窗口代码】其实代码非常简单： window.open ("WebForm1.aspx") --> 因为着是一段javascripts代码，所以它们应该放在标签和之间。是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。 window.open ("page.html") 用于控制弹出新的窗口page.html，如果pa
网页制作精华代码大全
天外有天，人外有人。 专注品质 不断创新 让精益求精成为习惯
05-28 4512
1. oncontextmenu="window.event.returnvalue=false"      将彻底屏蔽鼠标右键   no   可用于Table   2.                   取消选取、防止复制   3.  onpaste="return false"
JavaScript精华收集典藏
weixin_34252686的博客
03-28 127
//打开模式对话框 function doSelectUser(txtId) { strFeatures="dialogWidth=500px;dialogHeight=360px;center=yes;middle=yes ;help=no;status=no;scroll=no"; var url,strReturn; url="selUse...
一些常用的技巧（内容设计到asp.net,javascript,sqlserver等）
11-03 1147
 使用SqlBulkCopy类加载其他源数据到SQL表在数据回发时，维护ASP.NET Tree控件的位置vagerent的vs2005网站开发技巧ASP.NET2.0小技巧－－内部控件权限的实现图片滚动代码。css——之三行三列等高布局Datagird TemplateColumn类型列中如何设定日期格式为yyyy-MM-dd格式？SQL Server各种日期计算方法在sqlserver中如何根
左耳听风——笔记二：程序员练级攻略
热门推荐
页页的博客
10-26 5万+
左耳听风——笔记二：程序员练级攻略
firebug离线安装方法：把firebug下载了，直接拖到firefox浏览器中即可。
李蓝箫
10-24 1万+
 除了在线安装，还有离线安装的。离线安装的，很多初用者不知道的，老是问在哪里有选项安装。其实，无非就是把firebug下载了，直接拖到firefox浏览器中即可，其他步骤，和在线安装步骤差不多。部分在线安装有问题的，也可以使用这个连线安装的方法，往往能够成功。   
备忘:YYYY-mm-dd HH:MM:SS部分解释
李蓝箫
10-01 1万+
 备忘:YYYY-mm-dd HH:MM:SS部分解释 d               月中的某一天。一位数的日期没有前导零。     dd             月中的某一天。一位数的日期有一个前导零。     ddd           周中某天的缩写名称，在   AbbreviatedDayNames   中定义。     dddd         周中某天的完整名称，在   Da
一个JS图片轮播器
李蓝箫
07-16 6031
一个JS图片轮播器 效果如图：    实现代码：1.index.html 一个JS大图轮播器body { background-color: #FFFFFF;}-->http://blog.csdn.net/elifefly是示例，请根据实际需要修改，或者添加相应代码修改成动态。elifefly-->http://blog.csdn.net/elifefly"
最全的CSS浏览器兼容问题整理(IE6.0、IE7.0 与 FireFox)(收藏)
李蓝箫
02-28 4064
CSS 对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了 一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加DOCTYPE声 名.    常见问题1.div的垂直居中问题vertical-align:midd
中英文省市联动JavaScript脚本
李蓝箫
10-02 3754
 中英文省市联动JavaScript脚本由于读取数据库再联动的方法效率上不可行，于是做了这个静态的中英文省市联动JavaScript脚本。不知道网上有没有现成的，这个就是我们几个人花了不少时间做出来的。个别一些没有完善，请根据需要自行修改。注意，里面还有一些其他的函数，可以根据需要删除。 // JScript 文件 var culturename="zh-C
一个静态的图片轮播器的代码
李蓝箫
04-13 3475
可以添加动态链接的，呵呵style="filter:revealTrans(duration=1)"> var obj,first,total,cn,delay=2000function window.onload(){obj=document.getElementById("turn") //捕获ID为turn的对象first=1 //第一张图片的路径信息total=5 //最后一张图片
备忘：几种中文乱码处理转码情况
李蓝箫
09-07 2828
备忘：几种中文乱码处理转码情况    一般中文转码情况如下：public class HelloWorld {       public static void main(String[] argv){          try{            System.out.println("中文");//1            System.out.println("中文"
一个禁止右键、选择、拖曳、清空剪切板、禁止网页另存为的实用JavaScript脚本
李蓝箫
10-14 2369
 一个禁止右键、选择、拖曳、清空剪切板、禁止网页另存为的JavaScript脚本。 算是比较常用吧。自己不想写的时候就复制过去，直接使用，不需要其他设置。"JavaScript"> //***********************禁止右键*************************** if (window.Event)   document.captu
怎么样去掉回传刷新整个页面问题总结
李蓝箫
09-28 2072
 怎么样去掉回传刷新整个页面问题总结http://topic.csdn.net/u/20080928/01/9f2faddd-0b17-47c6-8699-da03f623c7e6.html  系统是asp.net2.0的。使用VS2005。使用了ajax。 ReqShopProductSales()" runat="server" Text= /> 这样一个服务器控件。Re
一个涵盖很多常用验证的js文件check.js--Majoy7给的
李蓝箫
09-20 1730
 一个涵盖很多常用验证的js文件check.js--Majoy7给的 check.js var is_rep = true;function urlgoto(inputurl) {    alert(inputurl);    var form1 = document.getElementById("form1");    form1.action = in
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值