使用HTML5原生对话框元素轻松创建模态组件

时间：2023-04-05 18:19:19 HTML5

使用HTML5原生对话框元素轻松创建模态组件HTML5.2草案增加了一个新的对话框元素。而是一种实验技术。以前，如果我们想构建任何类型的模态对话框或对话框，我们需要有一个背景，一个关闭按钮，以绑定对话框中事件的方式安排我们的标记，找到一种将消息传递出去的方式dialogue...这真的很复杂。对话框元素解决了上述所有问题。Bootstrap模态框和原生模态框的比较下面是一个bootstrap模态框的html结构：开始演示模态框×模态标题

在此处添加一些文本

关闭

下面是一个原生的HTML模态框的结构：显示模态框HTML5原生模态框基本模态框样式我们已经看到了dialog元素最简单的标记，你可能已经注意到上面的对话框中open是一个属性。将此属性添加到元素将强制显示对话框，否则将被删除。该对话框也将绝对定位在页面上。上图显示了一个基本的模态样式。打开浏览器，可以看到它的基本样式是这样的：dialog{display:block;位置：绝对；左：0px；右：0px；宽度：-webkit-fit-content；高度：-webkit-fit-content；颜色：黑色;保证金：自动；边框宽度：初始；边框样式：实心；边框颜色：初始；边框图像：初始；填充：1em；background:white;}dialog元素还引入了一个新的伪类selector::backdrop，通过浏览器查看::backdrop的默认样式如下：dialog::backdrop{position:fixed;顶部：0px；右：0px；底部：0px；左：0px；background:rgba(0,0,0,0.1);}设置对话框样式我们可以像任何HTML元素一样设置对话框元素的样式，几乎任何CSS样式都可以。使用::backdrop伪类选择器，我们可以使用它来设置背景样式。例如：dialog{margin-top:200px;宽度：250px；高度：250px；文本对齐：居中；行高：250px；边界半径：4px；边框：无；box-shadow:0015pxlightgray;}dialog::backdrop{background:rgba(black,.5);}上面样式效果如下：下面的对话框操作API是一个基本的对话框，因为open属性没有设置，所以它不会显示任何视觉上的东西。您需要使用JavaScriptAPI来显示/隐藏它：dialog元素的.show()和.close()API分别用于显示和关闭对话框。通过在DOM元素上使用这两个API，您可以显示和关闭对话框。例如：显示对话框你可以传递一个参数给dialog.close()。通过监听对话框元素的关闭事件，dialog.returnValue属性将返回给定的值。如：显示对话框另一个显示对话框的API是.showModal()如果您不希望用户与对话框以外的页面元素对象进行交互，然后使用.showModal()而不是.show()打开对话框。用.showModal()打开的对话框会有一个全窗半透明的背景层，阻止用户与对话框外的页面元素对象进行交互，对话框默认显示在窗口中间（以上、下、左、右为中心）；而用.show()打开的对话框默认会显示在窗口的顶部（可以通过css实现居中显示）。close事件在对话框关闭时触发。或者，用户可以通过键入“Escape”键关闭模式对话框。这将触发取消事件，您可以使用event.preventDefault()取消该事件。与表单集成您可以使用form[method="dialog"]将表单与显示表单对话框<脚本>vardialog=document.querySelector("dialog");document.querySelector("#show").onclick=function(){dialog.showModal();};//监听对话框元素的关闭事件dialog.addEventListener("close",function(e){if(this.returnValue==="Yes"){alert(this.returnValue)//dosomething...}else{alert(this.returnValue)//dosomething...};});浏览器兼容性桌面浏览器仅支持对话框的全部功能（截至本博文发布时），以实现跨浏览器兼容性，请使用dialog-polyfill。References参考文章：Dialogelementdemocharacter我的开源项目usuallyjs函数库：https://github.com/JofunLiang/usuallyjs

上一篇：算法之旅-选择排序方法

下一篇：MongoDB手册

使用HTML5原生对话框元素轻松创建模态组件相关文章