原生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
相关文章
|
19天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
29 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
2月前
|
移动开发 前端开发 JavaScript
原生JavaScript+canvas实现五子棋游戏_值得一看
本文介绍了如何使用原生JavaScript和HTML5的Canvas API实现五子棋游戏,包括棋盘的绘制、棋子的生成和落子、以及判断胜负的逻辑,提供了详细的代码和注释。
37 0
原生JavaScript+canvas实现五子棋游戏_值得一看
|
3月前
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
39 0
|
3月前
|
JavaScript 前端开发 API
从零开始学表单操作,jQuery 与原生 JavaScript 完全指南,带你轻松掌握网页交互关键!
【8月更文挑战第31天】在网页开发中,表单是实现用户互动的关键元素。无论是收集信息、提交数据还是验证输入,都需要对表单进行有效操作。本文档介绍了如何使用原生 JavaScript 和 jQuery 操作表单,包括获取表单元素、读写表单值、处理表单提交及验证等核心功能。jQuery 提供了更简洁的语法和更好的兼容性,但原生 JavaScript 在性能上有优势。选择合适的方法取决于项目需求和个人偏好。下面通过具体示例展示了两种方式的操作方法。
39 0
|
5月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
5月前
|
JavaScript
原生JS实现全选、全不选
原生JS实现全选、全不选
|
4月前
|
JavaScript
js 一键复制到剪贴板(原生js实现)
js 一键复制到剪贴板(原生js实现)
33 0
|
5月前
|
前端开发 JavaScript 容器
程序技术好文:纯原生javascript下拉框表单美化实例教程
程序技术好文:纯原生javascript下拉框表单美化实例教程
93 0
|
5月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
205 0
|
5月前
|
JavaScript 前端开发
原生JS如何查询元素属性
原生JS如何查询元素属性
45 0