HTML5 之 Dialog 标签

DonV

已于 2022-03-07 15:51:23 修改

阅读量9.6k

点赞数 9

分类专栏： HTML 文章标签： html5 html javascript

于 2021-07-31 15:48:09 首次发布

本文链接：https://blog.csdn.net/Don_GW/article/details/109066941

版权

HTML 专栏收录该内容

15 篇文章 7 订阅

订阅专栏

在这里插入图片描述

概述

dialog 是HTML5新增的语义化双标签，用于展示一个交互式的模态对话框。

绝大多数浏览器都不支持，仅有Chrome等浏览器支持。

属性

open

用于控制模态框的显隐，即含有open属性就显示，否则隐藏。

<dialog open>
  <p>hello world</p>
</dialog>

浏览器呈现如下，含有部分默认样式，并且仅水平方向居中。

在这里插入图片描述

显示时样式。

在这里插入图片描述

隐藏时样式。

在这里插入图片描述

returnValue

保留close方法传入的参数。

方法

show()

显示模态框，对其添加open属性。

<button>show</button>
<dialog>
  <p>hello world</p>
</dialog>

<script>
  var btn = document.querySelector('button')
  var dialog = document.querySelector('dialog')

  btn.addEventListener('click', () => {
    dialog.show()
  })
</script>

在这里插入图片描述

showModel()

显示模态框，对其添加open属性并且显示遮罩框，同时监控按键ESC（按下即关闭）。

<button>showModal</button>
<dialog>
  <p>hello world</p>
</dialog>

<script>
  var btn = document.querySelector('button')
  var dialog = document.querySelector('dialog')

  btn.addEventListener('click', () => {
    dialog.showModal()
  })
</script>

如下单击showModal显示，按下ESC关闭。

在这里插入图片描述

也可以关闭ESC的默认行为。

document.onkeydown = ev => {
  if (ev.key === 'Escape') {
    ev.preventDefault()
  }
}

close()

关闭模态框，删除其open属性，同时将close方法参数保留至dialog.returnValue属性上。

<button class="show">showModal</button>
<button class="returnValue">returnValue</button>
<dialog>
  <p>hello world</p>
  <button class="close">close</button>
</dialog>

<script>
  var showBtn = document.querySelector('.show')
  var closeBtn = document.querySelector('.close')
  var returnValueBtn = document.querySelector('.returnValue')
  var dialog = document.querySelector('dialog')

  showBtn.addEventListener('click', () => {
    dialog.showModal()
  })

  closeBtn.addEventListener('click', () => {
    dialog.close('hello world')
  })

  returnValueBtn.addEventListener('click', () => {
    console.log(dialog.returnValue)
  })
</script>

在这里插入图片描述

事件

close

当模态框关闭时触发。

<dialog open>
  <p>hello world</p>
  <button>close</button>
</dialog>

<script>
  var btn = document.querySelector('button')
  var dialog = document.querySelector('dialog')

  btn.addEventListener('click', () => {
    dialog.close()
  })

  dialog.addEventListener('close', ev => {
    console.log('close')
  })
</script>

在这里插入图片描述
一种比较特殊的情况是，若dialog元素中包含有form表单，且form的method属性为dialog，同时form中含有提交按钮，按钮点击时会关闭模态框并触发close事件。

<style>
  dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
  }
</style>

<body>
  <button>showModal</button>
  <dialog>
    <form method="dialog">
      <div>
        <input type="text">用户
      </div>
      <button type="submit">提交</button>
    </form>
  </dialog>

  <script>
    var btn = document.querySelector('button')
    var dialog = document.querySelector('dialog')

    btn.addEventListener('click', () => {
      dialog.showModal()
    })

    dialog.addEventListener('close', ev => {
      console.log('close')
    })
  </script>
</body>

在这里插入图片描述

cancel

当按下ESC关闭模态框时触发。

<button>showModal</button>
<dialog>
  <p>hello world</p>
</dialog>

<script>
  var btn = document.querySelector('button')
  var dialog = document.querySelector('dialog')

  btn.addEventListener('click', () => {
    dialog.showModal()
  })

  dialog.addEventListener('cancel', ev => {
    console.log('cancel')
  })
</script>

在这里插入图片描述

应用场景

嵌套模态框

模态框嵌套时，若遮罩背景色均有透明度，视觉效果上会产生叠加。

<style>
  dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
  }
</style>

<button class='outer-btn'>打开外层模态框</button>

<dialog class="outer-dig">
  <p>hello world</p>
  <button class="outer-close-btn">关闭</button>
  <button class="outer-open-btn">打开内层模态框</button>
</dialog>

<dialog class="inner-dig">
  <p>hello world</p>
  <button class="inner-close-btn">关闭</button>
</dialog>

<script>
  var outerBtn = document.querySelector('.outer-btn')
  var outerCloseBtn = document.querySelector('.outer-close-btn')
  var outerOpenBtn = document.querySelector('.outer-open-btn')
  var innerCloseBtn = document.querySelector('.inner-close-btn')
  var outerDig = document.querySelector('.outer-dig')
  var innerDig = document.querySelector('.inner-dig')

  outerBtn.addEventListener('click', () => {
    outerDig.showModal()
  })

  outerOpenBtn.addEventListener('click', () => {
    innerDig.showModal()
  })

  outerCloseBtn.addEventListener('click', () => {
    outerDig.close()
  })

  innerCloseBtn.addEventListener('click', () => {
    innerDig.close()
  })
</script>

在这里插入图片描述

点击 modal 关闭 Dialog

参考element ui的 Dialog 组件，其添加close-on-click-modal属性后可以通过点击modal关闭Dialog。

因此首先需要实现点击modal关闭Dialog。

<style>
  dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
  }
</style>

<button>showModal</button>
<dialog>
  <p>hello world</p>
</dialog>

<script>
  var btn = document.querySelector('button')
  var dialog = document.querySelector('dialog')

  btn.addEventListener('click', () => {
    dialog.showModal()
  })

  dialog.addEventListener('click', ev => {
    console.log(ev.target)
  })
</script>

dialog默认含1em的内边距和边框，点击p标签周围空白区域也会打印dialog。

在这里插入图片描述

因此将dialog的内边距和边框均去除，在其内部创建div元素。

dialog {
  padding: 0;
  border: none;
}

dialog .content {
  padding: 1em;
}

<dialog>
  <div class="content">
    <p>hello world</p>
  </div>
</dialog>

在这里插入图片描述

然后再根据节点的nodeName判断是否关闭Dialog。

dialog.addEventListener('click', function (ev) {
  if (ev.target.nodeName === 'DIALOG') this.close()
})

最后考虑添加close-on-click-modal属性开启此功能，同时封装js和样式为Dialog模块。

创建dialog文件夹，新增index.css和index.js，注意不要通过window.onload = function(){}添加事件，因为引入后外部可能会覆盖掉window.onload，造成功能失效。

// dialog/index.css
dialog {
  padding: 0;
  border: none;
}

dialog .content {
  padding: 1em;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

// dialog/index.js
window.addEventListener('load', () => {
  document.querySelectorAll('dialog[close-on-click-modal]').forEach(dialog => {
    dialog.addEventListener('click', function (ev) {
      if (ev.target.nodeName === 'DIALOG') this.close()
    })
  })
})

html引入dialog模块。

<head>
  <script src="dialog/index.js"></script>
  <link rel="stylesheet" href="dialog/index.css">
</head>

<body>
  <button>showModal</button>
  <dialog close-on-click-modal>
    <div class="content">
      <p>hello world</p>
    </div>
  </dialog>

  <script>
    window.onload = () => {
      var btn = document.querySelector('button')
      var dialog = document.querySelector('dialog')

      btn.addEventListener('click', () => {
        dialog.showModal()
      })
    }
  </script>
</body>

在这里插入图片描述

过渡动画

由于模态框隐藏时display属性为none，而transition是无法对此实现过渡的，因此使用visibility替代。

dialog:not([open]) {
  opacity: 0;
  visibility: hidden;
  display: block;
}

dialog {
  opacity: 1;
  transition: opacity 2s ease;
}

在这里插入图片描述

Polyfill

dialog浏览器支持程度较低，兼容性方面可以考虑 dialog-polyfill。

注意backdrop的样式在polyfill时，要通过dialog+.backdrop指定样式。

<head>
  <link rel="stylesheet" href="node_modules/dialog-polyfill/dialog-polyfill.css">
  <style>
    dialog::backdrop {
      background: rgba(0, 0, 0, 0.5);
    }

    dialog+.backdrop {
      background: rgba(0, 0, 0, 0.5);
    }

    dialog {
      padding: 0;
      border: none;
    }

    dialog .content {
      padding: 1em;
    }

    dialog:not([open]) {
      opacity: 0;
      visibility: hidden;
      display: block;
    }

    dialog {
      opacity: 1;
      transition: opacity 2s ease;
    }
  </style>
</head>

<body>
  <button>showModal</button>
  <dialog>
    <div class="content">
      <p>hello world</p>
    </div>
  </dialog>

  <script src="node_modules/dialog-polyfill/dist/dialog-polyfill.js"></script>
  <script>
    var btn = document.querySelector('button')
    var dialog = document.querySelector('dialog')

    dialogPolyfill.registerDialog(dialog)
    btn.addEventListener('click', () => {
      dialog.showModal()
    })
  </script>
</body>

🎉 写在最后

🍻伙伴们，如果你已经看到了这里，觉得这篇文章有帮助到你的话不妨点赞👍或 Star ✨支持一下哦！

手动码字，如有错误，欢迎在评论区指正💬~

你的支持就是我更新的最大动力💪~

GitHub / Gitee、GitHub Pages、掘金、CSDN 同步更新，欢迎关注😉~

DonV

关注

9
点赞
踩
28

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5 之 Dialog 标签

概述 dialog 是HTML5新增的语义化双标签，用于展示一个交互式的模态对话框。绝大多数浏览器都不支持，仅有Chrome等浏览器支持。属性open 用于控制模态框的显隐，即含有open属性就显示，否则隐藏。<dialog open> <p>hello world</p></dialog> 浏览器呈现如下，含有部分默认样式，并且仅水平方向居中。显示时样式。隐藏时样式。returnValue 保留clo.
复制链接

扫一扫