js弹出框、对话框、提示框、弹窗实现方法总结(推荐)


Posted in Javascript onMay 31, 2016

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

//====================== JS最常用三种弹出对话框 ======================== 
 
  //弹出对话框并输出一段提示信息 
  function ale() { 
    //弹出一个对话框 
    alert("提示信息!"); 
 
  } 
 
  //弹出一个询问框,有确定和取消按钮 
  function firm() { 
    //利用对话框返回的值 (true 或者 false) 
    if (confirm("你确定提交吗?")) { 
      alert("点击了确定"); 
    } 
    else { 
      alert("点击了取消"); 
    } 
 
  } 
 
  //弹出一个输入框,输入一段文字,可以提交 
  function prom() { 
    var name = prompt("请输入您的名字", ""); //将输入的内容赋给变量 name , 
 
    //这里需要注意的是,prompt有两个参数,前面是提示的话,后面是当对话框出来后,在对话框里的默认值 
    if (name)//如果返回的有内容 
    { 
      alert("欢迎您:" + name) 
    } 
 
  }

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

<!-----------按钮提示框----------> 
<input type="button" name="btn2" id="btn2" value="删除" onclick="return confirm('Yes/No');); 
 
<!-----------按钮提示框---------->  
<input type="button" name="btn2" id="btn2" value="提示" onclick="javaScript:alert('您确定要删除吗?'); 
 
<!-----------提交按钮---------->  
<input type="button" value="提交" onclick="javaScript:window.location.href='http://www.baidu.com';"/> 
 
<!-----------关闭按钮---------->  
<input type="button" value="关闭" onclick="javaScript:window.close();"> 
 
<!-----------返回并关闭连接---------->  
<a href="#" onclick="javascript:;window.opener.location.reload();window.close()">返回</a> 
javaScript:window.location.reload();//返回当前页并刷新 
 
<!-----------返回上一级页面---------->  
<input type="button" name="button" value="< 返回" onclick="javascript:history.go(-1)"/>

三、弹出独立窗口

//关闭,父窗口弹出对话框,子窗口直接关闭  
this.Response.Write("<script language=javascript>window.close();</script>"); 
 
//关闭,父窗口和子窗口都不弹出对话框,直接关闭  
this.Response.Write("<script>");  
this.Response.Write("{top.opener =null;top.close();}");  
this.Response.Write("</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;window.close();</script>"); 
this.Response.Write("<script>window.opener.location.replace(window.opener.document.referrer);window.close();</script>"); 
 
//子窗口刷新父窗口  
this.Response.Write("<script>window.opener.location.href=window.opener.location.href;</script>"); 
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;</script>"); 
 
//弹出相同的一页  
<INPUT type="button" value="Button" onclick="javascript:window.open(window.location.href)"> 
 
//  
Response.Write("parent.mainFrameBottom.location.href='yourwebform.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') //这句要写成一行 
-->

参数解释:

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':隐藏菜单栏地址栏工具条

四、弹出窗口实例演示

//1、最基本的弹出窗口代码 
 
window.open ('page.html')  
 
 
 //2、经过设置后的弹出窗口 
 
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') //这句要写成一行 
 
  
//参数解释:  
//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为允许;  
  
 //3、用函数控制弹出窗口 
 
function openwin() { 
  window.open("page.html", "newwindow", "height=100, width=400, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no") //写成一行 
}  
 $(document).ready(fucntion(){ 
   openwin(); 
 }); 
 
//这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。怎么调用呢? 
 
//方法一:<body onload="openwin()"> 浏览器读页面时弹出窗口;  
//方法二:<body onunload="openwin()"> 浏览器离开页面时弹出窗口;  
//方法三:用一个连接调用:  
//<a href="#" onclick="openwin()">打开一个窗口</a>  
//注意:使用的“#”是虚连接。  
//方法四:用一个按钮调用:  
//<input type="button" onclick="openwin()" value="打开窗口">  
 
 //4、同时弹出2个窗口  
  
  function openwin() { 
    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")//写成一行 
    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")//写成一行 
  }  
 
//为避免弹出的2个窗口覆盖,用top和left控制一下弹出的位置不要相互覆盖即可 。最后用上面说过的四种方法调用即可。  
//注意:2个窗口的name(newwindows和newwindow2)不要相同,或者干脆全部为空。 
 
 //5、主窗口打开文件1.htm,同时弹出小窗口page.html 
 
  function openwin() { 
    window.open("page.html", "", "width=200,height=200") 
  }  
 
//调用:<a href="1.htm" onclick="openwin()">open</a> 
  
 //6、弹出的窗口之定时关闭控制 
  
//下面我们再对弹出的窗口进行一些控制,效果就更好了。如果我们再将一小段 代码加入弹出的页面(注意是加入page.html的HTML中,不是主页面中),让它10秒后自动关闭是不是更酷了? 
 //首先,将如下代码加入page.html文件的<head>区:  
 function closeit() { 
   setTimeout("self.close()", 10000) //毫秒  
 }  
 //页面加载完成调用关闭事件 
$(document).ready(fucntion(){ 
   closeit(); 
 }); 
 
 //7、在弹出窗口中加上一个关闭按钮 
 
 //<INPUT TYPE='BUTTON' VALUE='关闭' onClick='window.close()'>  
 
 
 //8、内包含的弹出窗口-一个页面两个窗口 
 
//上面的例子都包含两个窗口,一个是主窗口,另一个是弹出的小窗口。通过下面的例子,你可以在一个页面内完成上面的效果。 
 
  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() 
  }  
 
//<a href="#" onclick="openwin()">打开一个窗口</a>  
//<input type="button" onclick="openwin()" value="打开窗口">  
 
 
 //9、终极应用--弹出的窗口之Cookie控制 
 
//回想一下,上面的弹出窗口虽然酷,但是有一点小毛病,比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页),那么每次刷新这个页面,窗口都会弹出一次,我们使用cookie来控制一下就可以了。 
//首先,将如下代码加入主页面HTML的<HEAD>区: 
 
  function openwin() { 
    window.open("page.html", "", "width=200,height=200") 
  } 
  function get_cookie(Name) { 
    var search = Name + "=" 
    var returnvalue = ""; 
    if (document.cookie.length > 0) { 
      offset = document.cookie.indexOf(search) 
      if (offset != -1) { 
        offset += search.length 
        end = document.cookie.indexOf(";", offset); 
        if (end == -1) 
          end = document.cookie.length; 
        returnvalue = unescape(document.cookie.substring(offset, end)) 
      } 
    } 
    return returnvalue; 
  } 
  function loadpopup() { 
    if (get_cookie('popped') == '') { 
      openwin() 
      document.cookie = "popped=yes" 
    } 
  }  
 
//然后,用<body onload="loadpopup()">(注意不是openwin而是loadpop啊!)替换主页面中原有的<BODY>这一句即可。你可以试着刷新一下这个页面或重新进入该页面,窗口再也不会弹出了。真正的Pop-Only-Once!

以上这篇js弹出框、对话框、提示框、弹窗实现方法总结(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
May 28 Javascript
JavaScript中自定义事件用法分析
Dec 23 Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
Bootstrap每天必学之下拉菜单
Nov 25 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
Feb 19 Javascript
基于jquery实现五星好评
Nov 18 jQuery
在knockoutjs 上自己实现的flux(实例讲解)
Dec 18 Javascript
在vue项目中引入highcharts图表的方法(详解)
Mar 05 Javascript
小程序实现左滑删除的效果的实例代码
Oct 19 Javascript
通过JS判断网页是否为手机打开
Oct 28 Javascript
vue实现登录功能
Dec 31 Vue.js
javascript事件模型介绍
May 31 #Javascript
使用JavaScript实现弹出层效果的简单实例
May 31 #Javascript
javascript事件处理模型实例说明
May 31 #Javascript
jQuery基础知识点总结(必看)
May 31 #Javascript
浅谈JavaScript中小数和大整数的精度丢失
May 31 #Javascript
javascript小数精度丢失的完美解决方法
May 31 #Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 #Javascript
You might like
认识并使用PHP超级全局变量
2010/01/26 PHP
php加密解密函数authcode的用法详细解析
2013/10/28 PHP
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
PHP微信开发之二维码生成类
2015/06/26 PHP
php获取数据库中数据的实现方法
2017/06/01 PHP
可实现多表单提交的javascript函数
2007/08/01 Javascript
JavaScript 事件冒泡简介及应用
2010/01/11 Javascript
jQuery中live方法的重复绑定说明
2011/10/21 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
JS拉起或下载app的实现代码
2017/02/22 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
[03:08]Ti4观战指南上
2014/07/07 DOTA
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python实现决策树
2017/12/21 Python
python生成tensorflow输入输出的图像格式的方法
2018/02/12 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
5分钟快速掌握Python定时任务框架的实现
2021/01/26 Python
HTML5中Localstorage的使用教程
2015/07/09 HTML / CSS
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
PHP笔试题
2012/02/22 面试题
非功能性需求都包括哪些方面
2013/10/29 面试题
艺术设计专业个人求职信范文
2013/12/11 职场文书
新浪微博实习心得体会
2014/01/27 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
中国梦演讲稿3分钟
2014/08/19 职场文书
“四风”问题自我剖析材料思想汇报
2014/09/23 职场文书
个人投资合作协议书
2014/10/12 职场文书
2014年信息宣传工作总结
2014/12/18 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫