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

假如你不但愿用户与对话框以外的其他页面元素工具举办交互，那么请行使.showModal()打开对话框而不是行使.show()。用.showModal()打开的对话框会有一个全窗口的半透明配景层，阻断用户与对话框之外的页面元素工具举办交互，同时对话框会默认表现在窗口正中间（上下阁下都居中）；而用.show()打开的对话框会默认表现在窗口顶部（可以通过css实现居中表现）。

封锁对话框后，close会触发一个变乱。其它，用户可以通过输入“Escape”键来封锁模式对话框。这将引发cancel您可以打消行使的变乱event.preventDefault()。

与表单集成行使

您可以行使form[method="dialog"]将表单与一个<dialog>元素集成行使。表单提交后，它会封锁对话框并配置dialog.returnValue到value已行使的提交按钮。

另外，您可以行使该autofocus属性在弹出对话框时自动将核心瞄准对话框内的窗体控件。

譬喻：

<!--HTML--> <dialog id ="dialog"> <form method ="dialog"> <p>你是否赞成行使条款？</p> <p><textarea class ="form-control" disabled>条款要求...</textarea></p> <button type ="submit" value ="是">是</button> <button type ="submit" value ="否" autofocus>否</button> </form> </dialog> <button id="show">表现表单对话框</button> <!--script--> <script> var dialog = document.querySelector("dialog"); document.querySelector("#show").onclick = function(){ dialog.showModal(); }; //监听dialog元素的close变乱 dialog.addEventListener("close", function(e){ if(this.returnValue === "是"){ alert(this.returnValue) //dosomething... }else{ alert(this.returnValue) //dosomething... }; }); </script>

赏识器兼容性

桌面赏识器只有谷歌赏识器支持dialog的完备成果（到本博文颁发时），要实现跨赏识器兼容请行使dialog-polyfill。

<iframe src=http://www.jb51.net/html5/"/caniuse.com/dialog/embed" scrolling="no" allowtransparency="true" allowfullscreen="true" frameborder="0"></iframe>

参考文献

参考文章：对话框元素演示

符本人开源项目

usuallyjs函数库：https://github.com/JofunLiang/usuallyjs

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!