原生引入<dialog>元素

最新推荐文章于 2024-07-16 17:38:24 发布

weixin_33779515

最新推荐文章于 2024-07-16 17:38:24 发布

阅读量90

点赞数

文章标签： ui

原文链接：http://www.cnblogs.com/abey/p/8384108.html

版权

<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元素的兼容性还是不是很好，但在谷歌上是可以显示的，可能后续会有更多浏览器支持这个特性。

转载于:https://www.cnblogs.com/abey/p/8384108.html

weixin_33779515

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生引入<dialog>元素

<dialog>元素是html5新推出的特性，之前我用弹框都是通过ui框架来实现，今天就试一下用原生方式引用弹框。　　首先，我们在页面上要定义<dialog></dialog>标签，然后通过modal.showModal()和modal.close()的方法来分别实现弹出框的显示和关闭功能。如果你想默认页面打开弹出框，就在dialog元素里加open即可...
复制链接

扫一扫