原生js——四种对话框
js一共提供了四种对话弹框,即
alert()
、confirm()
、prompt()
、showModalDialog()
。具体使用方法如下:
1.alert()
- alert()向用户显示一条消息并等待用户关闭对话框。
- 在大多数的浏览器里,alert()方法会产生阻塞,并等待用户关闭对话框。
- 也就是说,在用户关掉它们所显示的对话框之前,它们不会返回。这就意味着在弹出一个对话框前,代码就会停止运行。如果当前正在载入文档,也会停止载入,直到用户用要求的输入进行响应为止。
alert("我是一个alert对话框");
2.confirm()
- confirm()也显示一条消息,要求用户单击“确定”或“取消”按钮,并返回一个布尔值。
- 在浏览器中,confirm()会产生阻塞。
var test_value = confirm("你确定要继续吗?");
console.log(test_value); // 如果点击【确定】则返回true,点击【取消】,返回false
3.prompt()
- prompt()同样也显示一条消息,等待用户输入字符串,并返回那个字符串。
- 在浏览器中,prompt()会产生阻塞。
var message = prompt("请输入你的名字:");
console.log(message);
4.showModalDialog()
- 首先要说明的是,之前的三种对话框是通用的,showModalDialog()有一定的兼容性,可以简单概括为:IE、火狐、safari浏览器是支持的。但是Chrome和opera浏览器是不支持的,不过我们可以采用
window.open()
来代替。 - showModalDialog()显示一个包含HTML格式的“模态对话框”,可以给它传入参数,以及从对话框里返回值。
showModalDialog()在浏览器当前窗口中显示一个模态窗口,在显示模态窗口的时候,可以传入三个参数:
- 第一个参数用以指定提供对话框HTML内容的URL
- 第二个参数是一个任意值(数组和对象均可),这个值在对话框里的脚本中可以通过window.dialogArguments属性的值访问。
- 第三个参数是一个非标准的列表,包含以分号隔开的name=value对,如果提供了这个参数,可以配置对话框的尺寸或其他属性。具体属性如下:
|属性|说明|
|:---:|:---|
|dialogHeight
|对话框高度,不小于100px|
|dialogWidth
|对话框宽度。|
|dialogLeft
|离屏幕左的距离。|
|dialogTop
|离屏幕上的距离。|
|center
|{ yes | no | 1 | 0 }:是否居中,默认yes,但仍可以指定高度和宽度。|
|help
|{ yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。|
|resizable
|{ yes | no | 1 | 0 } [IE5+]: 是否可被改变大小。默认no。|
|status
|{ yes | no | 1 | 0 } [IE5+]: 是否显示状态栏。默认为yes[ Modeless]或no[Modal]。|
|scroll
|{ yes | no | 1 | 0 | on | off }:是否显示滚动条。默认为yes。|
- 在进行模态弹窗的时候,我们首先应该新建一个弹窗的新页面,并在里面写出我们需要的html、css和js代码。例如我们新建一个modal_html.html页面:
<form action="#"><label for="user_name">Name:</label><input type="text" id="user_name"><br><label for="user_gender">Gender:</label><input type="text" id="user_gender"><br><label for="user_age">Age:</label><input type="text" id="user_age">
</form><button id="btn_ok">ok</button>
<button id="btn_cancle">cancle</button><script>// 获取页面中的三个input元素,并赋值var user_name = document.getElementById('user_name');var user_age = document.getElementById('user_age');var user_gender = document.getElementById('user_gender');user_name.value = window.dialogArguments[0];user_age.value = window.dialogArguments[1];user_gender.value = window.dialogArguments[2];var btn_ok = document.getElementById('btn_ok');var btn_cancle = document.getElementById('btn_cancle');// 点击【ok】按钮,关闭并返回模态窗口中的值btn_ok.addEventListener("click",function(){window.returnValue = []window.returnValue[0] = user_name.value;window.returnValue[1] = user_age.value;window.returnValue[2] = user_gender.value;window.close();});// 点击【cancel】,直接关闭模态窗口,不返回值btn_cancle.addEventListener("click",function(){window.close();});
</script>
- 新的页面创建好之后,我们便可以在另外一个页面parent.html进行模态弹窗,按照要求传入三个参数,parent.html页面的代码如下:
var p = window.showModalDialog("modal_html.html", ["Tom", 23, "meal"], "dialogWidth:400px;dialogHeight:200px;resizable:no");// 上述代码等价于以下代码
var param_1 = "modal_html.html";
var param_2 = ["Tom", 23, "meal"];
var param_3 = "dialogWidth:400px;dialogHeight:200px;resizable:no";
var p = window.showModalDialog(param_1, param_2, param_3);
- 如果想从parent.html页面向模态窗口中传递数据,可以在模态窗口modal_html.html页面中,使用
window.dialogArguments
数组接受,示例代码如下:
var user_name = document.getElementById('user_name');
var user_age = document.getElementById('user_age');
var user_gender = document.getElementById('user_gender');
user_name.value = window.dialogArguments[0];
user_age.value = window.dialogArguments[1];
user_gender.value = window.dialogArguments[2];
- 如果想从模态窗口中向打开模态窗口的parent.html页面返回数据,首先要在parent.html页面设置
window.returnValue
,注意这里不需要使用return
语句显式返回。使用window.close();
语句关闭模态窗口的时候,会自动返回window.returnValue
。事例代码如下:
// 点击【ok】按钮,关闭并返回模态窗口中的值
btn_ok.addEventListener("click",function(){window.returnValue = []window.returnValue[0] = user_name.value;window.returnValue[1] = user_age.value;window.returnValue[2] = user_gender.value;window.close();
});
- 在模态窗口页面设置好
window.returnValue
,我们便可以在parent.html页面进行引用,示例代码如下:
var p = window.showModalDialog("modal_html.html", ["Tom", 23, "meal"], "dialogWidth:400px;dialogHeight:200px;resizable:no");alert(p[0]); // 如果在模态窗口中不修改,则为Tom
alert(p[1]); // 如果在模态窗口中不修改,则为 23
alert(p[2]); // 如果在模态窗口中不修改,则为 meal
原生js——四种对话框相关推荐
- javascript--弹出对话框 四种对话框 获得用户输入值 .
让用户点击确定 取消.让用户输入值.打开指定窗口 alert("message") confirm("message") prompt("messag ...
- html动态加载js方法,动态引入js四种方法总结
这次给大家带来动态引入js四种方法总结,动态引入js四种方法的注意事项有哪些,下面就是实战案例,一起来看一下. index.html test.jsalert("hello! I am te ...
- jS四种函数的调用方式
6- js 函数的四种调用方式 2016年11月04日 13:41:54 阅读数:7559 函数的四种调用方式 函数有下列调用模式 函数调用模式 方法调用模式 构造器模式 上下文模式 函数调用 模式 ...
- c语言中字符串去掉逗号,JS四种方法去除字符串最后的逗号
window.οnlοad=function() { var obj = {name: "xxx", age: 30, sex: "female"};//定义一 ...
- JS四种生成随机数的方法
用Math.random() 这个函数可以得到一个0-1(包括0,不包括1)的一个随机数. 一般有四种随机数的需求: 一.min ≤ n ≤ max function RandomNum(Min,Ma ...
- 原生js三种选项卡效果(轮播)
第三种:定时轮播切换(我这边定时是2s) <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...
- 原生Js 两种方法实现页面关键字高亮显示
方法一 依靠正则表达式修改 1.获取obj的html 2.统一替换html标签 3.替换要修改的关键字 4.再把html标签修改回去 不足就是如果查找的关键字跟替换的标签一样就有冲突了 <!DO ...
- 原生html中modal,基于原生JS封装的Modal对话框插件
基于原生JS封装Modal对话框插件 原生JS封装Modal对话框插件,个人用来学习原理与思想,只有简单的基本框架的实现,可在此基础上添加更多配置项 API配置 //基本语法 let modal = ...
- 使用四种框架分别实现百万websocket常连接的服务器--转
原文地址:http://colobu.com/2015/05/22/implement-C1000K-servers-by-spray-netty-undertow-and-node-js/#Nett ...
最新文章
- python学习--服务期间通讯和mysql数据库操作
- CSS实现垂直居中的5种思路
- 第一篇:容易遗忘的“枚举”
- Q96:过程纹理(Procedural Texture)(0)——概述
- java导出excel超出65536条处理
- 跨域的小小总结:js跨域及跨域的几种解决方法
- Java数字抽奖游戏核心代码及分析
- 软件缺陷分析的几种方法
- 手机端(移动端)UI框架整理
- [实用技巧]如何关闭VS中烦人的reference提示
- 天气预报小程序 微信小程序期末大作业(含文档)
- 26岁从财务转行软件测试,4年沉淀我已经是25k的测开工程师...
- Vue快速入门一:官网、下载、定义变量
- sonysrshg2 Android,Hear不go的索尼情怀——索尼蓝牙音箱SRS-HG2轻听
- 一个学习小组有5个人,每个人有三门课的考试成绩。将各个数据保存到二维数组a[5][3]中,并求全组分科的平均成绩和总平均成绩
- 活码生成器是什么?怎么用活码生成器制作活码?有没有免费的活码生成器?
- [ULK11]信号(三):从信号传递到原程序恢复执行
- 杰理AC692X---开关机实现方式介绍
- 如何理解P2P网络?
- 软件体系结构--装饰器模式