文档章节

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

唐小唐
 唐小唐
发布于 2015/04/29 19:43
字数 1903
阅读 85
收藏 1

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

  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("<script language=javascript>window.close();</script>");  

  3.   

  4. //关闭,父窗口和子窗口都不弹出对话框,直接关闭   

  5. this.Response.Write("<script>");   

  6. this.Response.Write("{top.opener =null;top.close();}");   

  7. this.Response.Write("</script>");  

  8.   

  9. //弹出窗口刷新当前页面width=200 height=200菜单。菜单栏,工具条,地址栏,状态栏全没有   

  10. this.Response.Write("<script language=javascript>window.open('rows.aspx','newwindow','width=200,height=200')</script>");  

  11.   

  12. //弹出窗口刷新当前页面   

  13. this.Response.Write("<script language=javascript>window.open('rows.aspx')</script>");  

  14. this.Response.Write("<script>window.open('WebForm2.aspx','_blank');</script>");  

  15.   

  16. //弹出提示窗口跳到webform2.aspx页(在一个IE窗口中)   

  17. this.Response.Write(" <script language=javascript>alert('注册成功');window.window.location.href='WebForm2.aspx';</script> ");  

  18.   

  19. //关闭当前子窗口,刷新父窗口   

  20. this.Response.Write("<script>window.opener.location.href=window.opener.location.href;window.close();</script>");  

  21. this.Response.Write("<script>window.opener.location.replace(window.opener.document.referrer);window.close();</script>");  

  22.   

  23. //子窗口刷新父窗口   

  24. this.Response.Write("<script>window.opener.location.href=window.opener.location.href;</script>");  

  25. this.Response.Write("<script>window.opener.location.href='WebForm1.aspx';</script>");  

  26.   

  27. //弹出提示窗口.确定后弹出子窗口(WebForm2.aspx)   

  28. this.Response.Write("<script language='javascript'>alert('发表成功!');window.open('WebForm2.aspx')</script>");  

  29.   

  30. //弹出提示窗口,确定后,刷新父窗口   

  31. this.Response.Write("<script>alert('发表成功!');window.opener.location.href=window.opener.location.href;</script>");  

  32.   

  33. //弹出相同的一页   

  34. <INPUT type="button" value="Button" onclick="javascript:window.open(window.location.href)">  

  35.   

  36. //   

  37. Response.Write("parent.mainFrameBottom.location.href='yourwebform.aspx?temp=" +str+"';");  

  38.   

  39.   

  40. <SCRIPT LANGUAGE="javascript">   

  41. <!--   

  42. 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'//这句要写成一行  

  43. -->   


   参数解释:

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. //方法一:<body onload="openwin()"> 浏览器读页面时弹出窗口;   

  37. //方法二:<body onunload="openwin()"> 浏览器离开页面时弹出窗口;   

  38. //方法三:用一个连接调用:   

  39. //<a href="#" onclick="openwin()">打开一个窗口</a>   

  40. //注意:使用的“#”是虚连接。   

  41. //方法四:用一个按钮调用:   

  42. //<input type="button" onclick="openwin()" value="打开窗口">   

  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. //调用:<a href="1.htm" onclick="openwin()">open</a>  

  61.    

  62.   //6、弹出的窗口之定时关闭控制  

  63.    

  64. //下面我们再对弹出的窗口进行一些控制,效果就更好了。如果我们再将一小段 代码加入弹出的页面(注意是加入page.html的HTML中,不是主页面中),让它10秒后自动关闭是不是更酷了?  

  65.   //首先,将如下代码加入page.html文件的<head>区:   

  66.   function closeit() {  

  67.       setTimeout("self.close()", 10000) //毫秒   

  68.   }   

  69.   //页面加载完成调用关闭事件  

  70. $(document).ready(fucntion(){  

  71.       closeit();  

  72.   });  

  73.   

  74.   //7、在弹出窗口中加上一个关闭按钮  

  75.   

  76.   //<INPUT TYPE='BUTTON' VALUE='关闭' onClick='window.close()'>   

  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("<TITLE>例子</TITLE>")  

  87.         OpenWindow.document.write("<BODY BGCOLOR=#ffffff>")  

  88.         OpenWindow.document.write("<h1>Hello!</h1>")  

  89.         OpenWindow.document.write("New window opened!")  

  90.         OpenWindow.document.write("</BODY>")  

  91.         OpenWindow.document.write("</HTML>")  

  92.         OpenWindow.document.close()  

  93.     }   

  94.   

  95. //<a href="#" onclick="openwin()">打开一个窗口</a>   

  96. //<input type="button" onclick="openwin()" value="打开窗口">   

  97.   

  98.   

  99.   //9、终极应用--弹出的窗口之Cookie控制  

  100.   

  101. //回想一下,上面的弹出窗口虽然酷,但是有一点小毛病,比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页),那么每次刷新这个页面,窗口都会弹出一次,我们使用cookie来控制一下就可以了。  

  102. //首先,将如下代码加入主页面HTML的<HEAD>区:  

  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. //然后,用<body onload="loadpopup()">(注意不是openwin而是loadpop啊!)替换主页面中原有的<BODY>这一句即可。你可以试着刷新一下这个页面或重新进入该页面,窗口再也不会弹出了。真正的Pop-Only-Once!  


© 著作权归作者所有

唐小唐
粉丝 2
博文 24
码字总数 20125
作品 0
荆州
程序员
私信 提问
python自动化 测试库 操作提示框 Alert | Confirm

其中原理就是 js的简单hook 相当于临时重写此函数 在自动化操作的时候会弹出提示框,如果是代码触发的 就在操作前一句ShieldAlert调用此函数 以保证此函数不失效并且保证测试js正常运行。 注...

开飞色
2018/07/27
338
0
Android WebView详解(二):Android原生与JS互调

Android 去调用JS 的代码 通过WebView的loadUrl() 先写一个html,很简单的一个代码,alert显示。 android_load_js.html Android调用 JS 代码demo// JS代码 在Activity中 mWebSettings = mWe...

蔡小鹏
2018/02/06
572
0
JavaScript零基础入门——(十四)JavaScript的BOM

JavaScript零基础入门——(十四)JavaScript的BOM 大家好,欢迎回到我们的JavaScript零基础入门。上一节课我们了解了JavaScript的事件,这一节课,我们以JavaScript的BOM,来结束JavaScrip...

JandenMa
2018/07/08
47
0
jQuery zxxbox弹出框插件(v3.0)测试页面

源文件下载.zip 16.6k 一、内置弹框 显示最简单的内置的信息确定提示框:点击我 $("#test1").click(function(){ $.zxxbox.remind("你已成功受邀参加威尼斯电影节。"); }); 带回调函数的信息确...

mickelfeng
2013/01/07
158
0
浅谈WKWebView使用、JS的交互

前言 WKWebView是iOS8 出来的浏览器控件,用来取代UIWebView.对于WKWebView与UIWebView的对比特点,这里就不过多的叙述,都算是老生常谈的问题了,网上的说明也很多.近来在做Web端,需要植入移动端...

神经骚栋
2018/07/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

java通过ServerSocket与Socket实现通信

首先说一下ServerSocket与Socket. 1.ServerSocket ServerSocket是用来监听客户端Socket连接的类,如果没有连接会一直处于等待状态. ServetSocket有三个构造方法: (1) ServerSocket(int port);...

Blueeeeeee
今天
6
0
用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
5
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
14
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
15
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部