w3ctech

HTML5 dialog元素一学就会

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微信

扫码关注w3ctech微信公众号

共收到1条回复

只有w3ctech成员才能发表和回复。
登录 或者 注册 后发表或回复!