欢迎光临！ 【模板119】平台每天更新源码-所有VIP源码均有在线演示
注册 [登录]

logo

建站一条龙服务
首页>>无忧学院>>程序开发

js弹出框、对话框、提示框、弹窗总结

织梦源码推荐
优质源码
域名空间服务器
我要仿站
定制网站

  

js弹出框、对话框、提示框、弹窗总结


一、JS的三种最常见的对话框

 

[javascript] view plaincopy
 
 
  1. //====================== JS最常用三种弹出对话框 ========================  
  2.   
  3.     //弹出对话框并输出一段提示信息  
  4.     function ale() {  
  5.         //弹出一个对话框  
  6.         alert("提示信息！");  
  7.   
  8.     }  
  9.   
  10.     //弹出一个询问框，有确定和取消按钮  
  11.     function firm() {  
  12.         //利用对话框返回的值 （true 或者 false）  
  13.         if (confirm("你确定提交吗？")) {  
  14.             alert("点击了确定");  
  15.         }  
  16.         else {  
  17.             alert("点击了取消");  
  18.         }  
  19.   
  20.     }  
  21.   
  22.     //弹出一个输入框，输入一段文字，可以提交  
  23.     function prom() {  
  24.         var name = prompt("请输入您的名字", ""); //将输入的内容赋给变量 name ，  
  25.   
  26.         //这里需要注意的是，prompt有两个参数，前面是提示的话，后面是当对话框出来后，在对话框里的默认值  
  27.         if (name)//如果返回的有内容  
  28.         {  
  29.             alert("欢迎您：" + name)  
  30.         }  
  31.   
  32.     }  

二、点击按钮时常用的6中提示框和操作

 

 

[html] view plaincopy
 
 
  1.   
  2. <input type="button" name="btn2" id="btn2" value="删除" onclick="return confirm('Yes/No'););  
  3.   
  4.    
  5. <input type="button" name="btn2" id="btn2" value="提示" onclick="javaScript:alert('您确定要删除吗？');  
  6.   
  7.    
  8. <input type="button" value="提交" onclick="javaScript:window.location.href='http://www.baidu.com';"/>  
  9.   
  10.    
  11. <input type="button" value="关闭" onclick="javaScript:window.close();">  
  12.   
  13.    
  14. <a href="#" onclick="javascript:;window.opener.location.reload();window.close()">返回a>  
  15. javaScript:window.location.reload();//返回当前页并刷新  
  16.   
  17.    
  18. <input type="button" name="button" value="< 返回" onclick="javascript:history.go(-1)"/>  

三、弹出独立窗口

 

 

[javascript] view plaincopy
 
 
  1. //关闭,父窗口弹出对话框,子窗口直接关闭   
  2. this.Response.Write("window.close();");  
  3.   
  4. //关闭,父窗口和子窗口都不弹出对话框,直接关闭   
  5. this.Response.Write("");  
  6.   
  7. //弹出窗口刷新当前页面width=200 height=200菜单。菜单栏,工具条,地址栏,状态栏全没有   
  8. this.Response.Write("window.open('rows.aspx','newwindow','width=200,height=200')");  
  9.   
  10. //弹出窗口刷新当前页面   
  11. this.Response.Write("window.open('rows.aspx')");  
  12. this.Response.Write("");  
  13.   
  14. //弹出提示窗口跳到webform2.aspx页(在一个IE窗口中)   
  15. this.Response.Write(" alert('注册成功');window.window.location.href='WebForm2.aspx'; ");  
  16.   
  17. //关闭当前子窗口,刷新父窗口   
  18. this.Response.Write("");  
  19. this.Response.Write("");  
  20.   
  21. //子窗口刷新父窗口   
  22. this.Response.Write("");  
  23. this.Response.Write("");  
  24.   
  25. //弹出提示窗口.确定后弹出子窗口(WebForm2.aspx)   
  26. this.Response.Write("alert('发表成功！');window.open('WebForm2.aspx')");  
  27.   
  28. //弹出提示窗口,确定后,刷新父窗口   
  29. this.Response.Write("");  
  30.   
  31. //弹出相同的一页   
  32. "button" value="Button" onclick="javascript:window.open(window.location.href)">  
  33.   
  34. //   
  35. Response.Write("parent.mainFrameBottom.location.href='yourwebform.aspx?temp=" +str+"';");  
  36.   
  37.   
  38. "javascript">   
  39.    

   参数解释：

 

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为允许；

'newwin':隐藏菜单栏地址栏工具条 
 

四、弹出窗口实例演示

 

[javascript] view plaincopy
 
 
  1.   //1、最基本的弹出窗口代码  
  2.   
  3. window.open ('page.html')   
  4.   
  5.   
  6.   //2、经过设置后的弹出窗口  
  7.   
  8. 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') //这句要写成一行  
  9.   
  10.    
  11. //参数解释：   
  12. //window.open 弹出新窗口的命令；   
  13. //'page.html' 弹出窗口的文件名；   
  14. //'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替；   
  15. //height=100 窗口高度；   
  16. //width=400 窗口宽度；   
  17. //top=0 窗口距离屏幕上方的象素值；   
  18. //left=0 窗口距离屏幕左侧的象素值；   
  19. //toolbar=no 是否显示工具栏，yes为显示；   
  20. //menubar，scrollbars 表示菜单栏和滚动栏。   
  21. //resizable=no 是否允许改变窗口大小，yes为允许；   
  22. //location=no 是否显示地址栏，yes为允许；   
  23. //status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；   
  24.    
  25.   //3、用函数控制弹出窗口  
  26.   
  27. function openwin() {  
  28.     window.open("page.html", "newwindow", "height=100, width=400, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no") //写成一行  
  29. }   
  30.   $(document).ready(fucntion(){  
  31.       openwin();  
  32.   });  
  33.   
  34. //这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。怎么调用呢？  
  35.   
  36. //方法一： 浏览器读页面时弹出窗口；   
  37. //方法二： 浏览器离开页面时弹出窗口；   
  38. //方法三：用一个连接调用：   
  39. //打开一个窗口   
  40. //注意：使用的#”是虚连接。   
  41. //方法四：用一个按钮调用：   
  42. //   
  43.   
  44.   //4、同时弹出2个窗口   
  45.    
  46.     function openwin() {  
  47.         window.open("page.html", "newwindow", "height=100, width=100, top=0, left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=n o, status=no")//写成一行  
  48.         window.open("page2.html", "newwindow2", "height=100, width=100, top=1 00, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, loca tion=no, status=no")//写成一行  
  49.     }   
  50.   
  51. //为避免弹出的2个窗口覆盖，用top和left控制一下弹出的位置不要相互覆盖即可 。最后用上面说过的四种方法调用即可。   
  52. //注意：2个窗口的name(newwindows和newwindow2)不要相同，或者干脆全部为空。  
  53.   
  54.   //5、主窗口打开文件1.htm，同时弹出小窗口page.html  
  55.   
  56.     function openwin() {  
  57.         window.open("page.html", "", "width=200,height=200")  
  58.     }    
  59.   
  60. //调用：open  
  61.    
  62.   //6、弹出的窗口之定时关闭控制  
  63.    
  64. //下面我们再对弹出的窗口进行一些控制，效果就更好了。如果我们再将一小段 代码加入弹出的页面(注意是加入page.html的HTML中，不是主页面中)，让它10秒后自动关闭是不是更酷了？  
  65.   //首先，将如下代码加入page.html文件的区：   
  66.   function closeit() {  
  67.       setTimeout("self.close()", 10000) //毫秒   
  68.   }   
  69.   //页面加载完成调用关闭事件  
  70. $(document).ready(fucntion(){  
  71.       closeit();  
  72.   });  
  73.   
  74.   //7、在弹出窗口中加上一个关闭按钮  
  75.   
  76.   //   
  77.   
  78.   
  79.   //8、内包含的弹出窗口-一个页面两个窗口  
  80.   
  81. //上面的例子都包含两个窗口，一个是主窗口，另一个是弹出的小窗口。通过下面的例子，你可以在一个页面内完成上面的效果。  
  82.   
  83.     function openwin() {  
  84.         OpenWindow = window.open("", "newwin", "height=250, width=250,toolbar=no ,scrollbars=" + scroll + ",menubar=no");  
  85.         //写成一行   
  86.         OpenWindow.document.write("例子")  
  87.         OpenWindow.document.write("")  
  88.         OpenWindow.document.write("

    Hello!

    "    )  
  89.         OpenWindow.document.write("New window opened!")  
  90.         OpenWindow.document.write("")  
  91.         OpenWindow.document.write("")  
  92.         OpenWindow.document.close()  
  93.     }   
  94.   
  95. //打开一个窗口   
  96. //   
  97.   
  98.   
  99.   //9、终极应用--弹出的窗口之Cookie控制  
  100.   
  101. //回想一下，上面的弹出窗口虽然酷，但是有一点小毛病，比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页)，那么每次刷新这个页面，窗口都会弹出一次，我们使用cookie来控制一下就可以了。  
  102. //首先，将如下代码加入主页面HTML的区：  
  103.   
  104.     function openwin() {  
  105.         window.open("page.html", "", "width=200,height=200")  
  106.     }  
  107.     function get_cookie(Name) {  
  108.         var search = Name + "="  
  109.         var returnvalue = "";  
  110.         if (document.cookie.length > 0) {  
  111.             offset = document.cookie.indexOf(search)  
  112.             if (offset != -1) {  
  113.                 offset += search.length  
  114.                 end = document.cookie.indexOf(";", offset);  
  115.                 if (end == -1)  
  116.                     end = document.cookie.length;  
  117.                 returnvalue = unescape(document.cookie.substring(offset, end))  
  118.             }  
  119.         }  
  120.         return returnvalue;  
  121.     }  
  122.     function loadpopup() {  
  123.         if (get_cookie('popped') == '') {  
  124.             openwin()  
  125.             document.cookie = "popped=yes"  
  126.         }  
  127.     }   
  128.   
  129. //然后，用（注意不是openwin而是loadpop啊！）替换主页面中原有的这一句即可。你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出了。真正的Pop-Only-Once！  
 
二维码

本文手机访问二维码

作者：mb119.com        关注度：54        发布时间：2016-02-06 06:40:00
☉首先声明，只要是我们的vip会员所有源码均可以免费下载，不做任何限制
☉本站的源码不会像其它下载站一样植入大量的广告。
☉本站只提供精品织梦源码，源码在于可用，不在多！！希望在这里找到你合适的。
☉本站提供的整站织梦程序，均带数据及演示地址。可以在任一源码详情页查看演示地址
☉本站所有资源（包括源码、模板、素材、特效等）仅供学习与参考，请勿用于商业用途。
☉如有其他问题，请加网站客服QQ(971977809)进行交流点击这里给我发消息

【带手机站】管道疏通 清淤清理清洗网站模板企业专用-内容完整下水道疏通网站源码-手机站升级版本-织梦核心

文章类织梦源码站模版程序带广告位可申请联盟广告的说说文章发布站-织梦-模板119免费下载

机械产品黑色网站源码

app推广单页网站源码 适合各类app 单品产品推广网站源码

高端衫衫服装品牌类企业网站织梦模板内容丰富 整站带后台企业网站源码

土豪金色装饰装修家庭装修工装企业网站源码带手机站共用后台二合一aspcms

相关程序开发内容：
新手上路
织梦CMS
模板网站的优势
怎么购买模板
模板购买后怎么安装
业务介绍
织梦模板
织梦主机
广告投放
网站仿制
服务支持
如何下载
网站地图
程序环境介绍
版权与免责声明
售后服务
服务项目
网站定制
技术教程
建议反馈
关于我们
点击这里给我发消息

Copyright @ 2011-2015 版权所有: All Rights Reserved. 鄂ICP备15016634号-6

模板119源码平台由武汉众诚云网科技有限公司提供技术支持

在线客服