摘要：在随后的版本中，团队一直在修改原生弹窗的表现。所以这种原生弹窗的最大用处不是用来提示用户信息，而是伤害用户。团队在中移除了对弹窗的支持。获取用户输入可以用中的元素。作为的元素，目前除了和以外，其它浏览器均未支持。
自 1995 年 JavaScript 诞生之初，就包含了 3 个方法 alert()、confirm() 和 prompt()。在随后的 Chrome 版本中，Chrome 团队一直在修改原生弹窗的表现。
但是这种阻断式的弹窗总被各种广告网站恶意使用，因为只要弹窗出现，JavaScript 引擎就会一直等待，知道用户操作。所以这种原生弹窗的最大用处不是用来提示用户信息，而是伤害用户(Tech support scammers use subdomain trick to defeat blocking)。
因此 Chromium 团队强烈建议你不要使用这类弹窗。
而弹窗和 onbeforeunload 事件相结合之后那简直就是大杀器，而此类弹窗经常被用来提示浏览者xxxx。
Chromium 团队在 Chrome 51 中移除了对 onbeforeunload 弹窗的支持。在此之前 Safari 9.1 和 Firefox 4 早就已经移除了。当我们在 onbeforeunload 事件中调用 alert 时，会在 devtools 中产生警告：
Blocked alert("before unload") during beforeunload.
除此之外，alert()、confirm()、prompt() 的行为也做了改变，不再作为顶级的原生弹窗而存在，当弹窗所在的浏览器标签被切走后，它们会自动消失。(Safari 9.1 说：“你怎么到现在才来学啊！”)
Chromium 在官方博客中说到：
对于 alert()/confirm()/prompt() 我们有很多替代的选择。 譬如需要弹个通知消息时（日历应用）可以用Notifications API。 获取用户输入可以用 HTML 中的 元素。 对于 XSS proofs-of-concept 则可用 console.log(document.origin)。
作为 HTML 5.2 的元素，目前除了 Chrome 和 Opara 以外，其它浏览器均未支持。但是 Google 提供了一个 dialog-polyfill。
一个最简单的例子：
这段 html 什么也不显示，开发者需要使用 javascript 的 API .show() 和 .close() 来控制 dialog 的显示和隐藏。
var dialog = document.querySelector("dialog");
document.querySelector("#show").onclick = function() {
dialog.show();
};
document.querySelector("#close").onclick = function() {
dialog.close();
};
https://jsfiddle.net/m1dzstxo/
点击按钮会出现一个弹窗（非常丑）
不过 dialog 作为一个 html 标签，是可以使用 css 的。我们给它加一段 css 样式：
dialog {
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 6px;
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}
https://jsfiddle.net/m1dzstxo/1/
再点击按钮，弹窗了一个稍微漂亮点的弹窗：
我们还可以使用 .showModal() 弹窗一个模态对话框，当我们关闭弹窗时触发 close 事件。我们还可以使用 ESC 键关闭一个弹窗，此时会触发 cancel 事件。和其它所有事件一样，我们可以通过调用 event.preventDefault() 来阻止默认行为。
直接弹窗一个模态窗口是不够友好的，有时我们需要把背景虚化：
通过使用 CSS 的伪元素 ::backdrop 很容易就可以做到：
dialog::backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.8);
}
为什么使用 元素而不是第三方的 javascript 库？
我觉得两者并不冲突，目前大部分 javascript 库都是使用 相比 开发面向未来的前端，当有 polyfill 方案时，我们应该总是使用最新标准。 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。 转载请注明本文地址：https://www.ucloud.cn/yun/60155.html 摘要：在随后的版本中，团队一直在修改原生弹窗的表现。所以这种原生弹窗的最大用处不是用来提示用户信息，而是伤害用户。团队在中移除了对弹窗的支持。获取用户输入可以用中的元素。作为的元素，目前除了和以外，其它浏览器均未支持。
自 1995 年 JavaScript 诞生之初，就包含了 3 个方法 alert()、confirm() 和 prompt()。在随后的 Chrome 版本中，Chrome... 推荐
1. JavaScript 在嵌入式设备与物联网中的应用现状
https://auth0.com/blog/javasc...
随着近年来 Web 的发展与 JavaScript 的崛起，JavaScript 被应用到了许多原本不曾想象到的场景中，从服务端、工作站、数据库、桌面环境到物联网设备中，都可以见到 JavaScript 的身影。而本文则概括了 JavaScript 在不同的嵌入式微... 推荐
1. JavaScript 在嵌入式设备与物联网中的应用现状
https://auth0.com/blog/javasc...
随着近年来 Web 的发展与 JavaScript 的崛起，JavaScript 被应用到了许多原本不曾想象到的场景中，从服务端、工作站、数据库、桌面环境到物联网设备中，都可以见到 JavaScript 的身影。而本文则概括了 JavaScript 在不同的嵌入式微... 推荐
1. JavaScript 在嵌入式设备与物联网中的应用现状
https://auth0.com/blog/javasc...
随着近年来 Web 的发展与 JavaScript 的崛起，JavaScript 被应用到了许多原本不曾想象到的场景中，从服务端、工作站、数据库、桌面环境到物联网设备中，都可以见到 JavaScript 的身影。而本文则概括了 JavaScript 在不同的嵌入式微... 推荐
1. JavaScript 在嵌入式设备与物联网中的应用现状
https://auth0.com/blog/javasc...
随着近年来 Web 的发展与 JavaScript 的崛起，JavaScript 被应用到了许多原本不曾想象到的场景中，从服务端、工作站、数据库、桌面环境到物联网设备中，都可以见到 JavaScript 的身影。而本文则概括了 JavaScript 在不同的嵌入式微... 来模拟弹窗，当更多的浏览器开始支持 时，第三方的 javascript 库也会考虑使用 作为首先的弹窗方式的，毕竟 是 HTML 5.2 规范中的。
而言， 更大强大，也更加符合规范。比如 的模态弹窗可以保证即使全屏的情况下，弹窗可以保持在最顶层(top-layer)。top-layer 定义在 whatwg 的 Fullscreen API 中，可以配合伪元素 ::backdrop 以及伪类 :fullscreen 一起使用。
相关文章
Chromium 新的弹窗机制以及 HTML 的 <dialog> 元素
阿里云前端周刊 - 第 14 期
阿里云前端周刊 - 第 14 期
阿里云前端周刊 - 第 14 期
阿里云前端周刊 - 第 14 期
发表评论
0条评论
阅读 1966·2021-11-19 09:40
阅读 617·2021-09-24 09:47
阅读 2273·2021-09-01 10:41
阅读 1313·2019-08-30 14:12
阅读 377·2019-08-29 12:32
阅读 2716·2019-08-29 12:25
阅读 2771·2019-08-28 18:30
阅读 1598·2019-08-26 11:47
