Chrome 37 已经支持<dialog>元素，这意味着我们创建模态窗口组件再也不需要像以前那么麻烦了。

基本知识

属性

• open：为true时<dialog>元素可见，为false时不可见。

• returnValue：当<dialog>元素的close方法被调用并传入参数时，returnValue将被设置为close方法的参数的值。

方法

• show：显示<dialog>元素，页面上其他元素仍可交互。

• showModal：以模态方式显示<dialog>元素，页面上<dialog>以外的其他元素不可交互。与show方法不同的是，如果<dialog>的open值为true，调用此方法将报错。

• close：关闭（隐藏）<dialog>元素。该方法接受一个可选参数，如果传入参数，则<dialog>的returnValue属性将会被设置为参数的值。如果<dialog>的open值为false或未设置，调用此方法将报错。

事件

• close：关闭<dialog>元素时触发该事件（设置open属性为false会隐藏窗口，但不触发该事件）。

• cancel：按键盘的Esc键关闭模态<dialog>元素时触发该事件。

示例

打开和关闭窗口

看了上面的介绍，这个简单例子我想大家理解起来应该没有任何难度。

<button id="open">打开窗口</button>
<button id="modal">打开模态窗口</button>
<button id="close">关闭窗口</button>

<dialog>
  <p>我是一个dialog</p>
  <button>关闭</button>
</dialog>

<script>
document.querySelector('#open').onclick = function() {
  document.querySelector('dialog').show()
}

document.querySelector('#modal').onclick = function() {
  document.querySelector('dialog').showModal()
}

document.querySelector('#close').onclick = function() {
  document.querySelector('dialog').close()
}

document.querySelector('dialog>button').onclick = function() {
  document.querySelector('dialog').close()
}
</script>

设置样式

我们可以为<dialog>窗口设置各种样式。当它以模态方式打开时，还可以通过::backdrop伪元素为窗口背景设置样式。

<style>
dialog {
  background: #f0f0f0;
  border: 1px solid gray;
  border-radius: 5px;
  box-shadow: 0 1px 10px gray;
  top: 30%;
}
dialog::backdrop {
  background: rgba(173, 216, 230, .7);
}
</style>

<button id="open">打开窗口</button>

<dialog>
  <p>我是一个dialog吗？</p>
  <button>是</button>
  <button>不是</button>
</dialog>

<script>
document.querySelector('#open').onclick = function() {
  document.querySelector('dialog').showModal()
}

document.querySelector('dialog > button:first-of-type').onclick = function() {
  document.querySelector('dialog').close(true)
}

document.querySelector('dialog > button:last-of-type').onclick = function() {
  document.querySelector('dialog').close(false)
}

document.querySelector('dialog').onclose = function() {
  alert(document.querySelector('dialog').returnValue)
}

document.querySelector('dialog').oncancel = function() {
  alert('取消！')
}
</script>

在窗口中插入表单

当<dialog>中的表单的method属性设置为dialog时，提交表单将会关闭<dialog>并将其returnValue设置为提交按钮的值。

<button id="open">打开窗口</button>
<dialog>
  <form method="dialog">
    <p>我是一个dialog吗？</p>
    <button type="submit" value="yes">是</button>
    <button type="submit" value="no">不是</button>
  </form>
</dialog>

<script>
document.querySelector('#open').onclick = function() {
  document.querySelector('dialog').showModal()
}

document.querySelector('dialog').onclose = function() {
  alert(document.querySelector('dialog').returnValue)
}
</script>

结论

目前<dialog>的支持程度还不是很理想，而规范描述的一些特性即使Chrome也并未实现。因此短期还无法大规模应用，但我相信随着规范的进一步完善和厂商的跟进，这个web应用中非常常见的组件应该会得到普遍的应用，取代笨重的传统做法。

扫码关注w3ctech微信公众号