<dialog>元素是html5新推出的特性，之前我用弹框都是通过ui框架来实现，今天就试一下用原生方式引用弹框。
首先，我们在页面上要定义<dialog></dialog>标签，然后通过modal.showModal()和modal.close()的方法来分别实现弹出框的显示和关闭功能。如果你想默认页面打开弹出框，就在dialog元素里加open即可打开，是不是觉得很简单？而且在dialog框里也可以和模态框外的元素进行交互，同时模态框在关闭的时候会传个状态码，可以通过modal.returnValue来获取，这样就实现了简单的模态框展示。如果想要设置模态框的样式，可以通过dialog元素设置css样式，dialog::backdrop设置背景样式。
具体我自己实现的代码如下：
<body> <p class="pText">haode</p> <button class="btn" type="button">click</button> <dialog id="demo-modal"> <h3 class="modal-header">hello!</h3> <div class="modal-body"> <p class="ppText"></p> </div> <footer class="modal-footer"> <button id="close" type="button">close</button> </footer> </dialog> <script src="../jquery-1.12.4.js" charset="utf-8"></script> <script charset="utf-8"> $(".btn").on(‘click‘, function(event) { event.preventDefault(); const modal = $("#demo-modal")[0]; modal.showModal(); console.log("//",$(".pText").text()); $(".ppText").text($(".pText").text()); $("#close").on(‘click‘, function(event) { event.preventDefault(); modal.close("close"); console.log("mm",modal.returnValue);//close }); }); </script> </body>
但是，dialog元素的兼容性还是不是很好，但在谷歌上是可以显示的，可能后续会有更多浏览器支持这个特性。