初探HTML5.x新特性《dialog》标签

  1. 云栖社区>
  2. 博客>
  3. 正文

初探HTML5.x新特性《dialog》标签

毋闲 2018-01-18 14:27:25 浏览1846
展开阅读全文

maxresdefault
HTML5.2加入了一个新的元素dialog,表示一个对话框或其他交互式组件,书写的时候不能省略结束标签。API很简单用起来也非常顺手。

Usage

<dialog open>
<p>老王又有时间可以陪女朋友看电影了</p>
</dialog>

Attributes

此标签包含所有全局属性,除了tabIndex

open

该open属性意味着该对话框是可见的。没有它,这个对话框就会隐藏起来,直到你使用JavaScript来显示它。添加任何样式之前,对话框呈现如下默认样式:
image
默认水平居中,宽高适配文字内容
JavaScript有几个方法和属性可以使dialog 元素容易处理。你可能最需要的三种方法是showModal()show()close()

const modal = document.querySelector('dialog');

modal.showModal();

modal.close();
  • showModal()会添加open属性即打开对话框。
  • show()和showModal一样打开对话框,但是有区别在于show方法的打开的模态框是没有背景遮罩的。showModal的方式打开会有一个透明的遮罩层,且这个遮罩层可以通过::backdrop设置样式的。
  • close()则会删除open属性即隐藏,close是可以传参的像这样:modal.close('some return value')。传入的值可以通过modal.returnValue获取。

当然还有可以用的事件close。

  • close: 当modal关闭的时候触发
  • cancel: 当按下ESC关闭模态框的时候触发
// display returnValue
modal.addEventListener('close', () => {
  returnSpan.innerHTML = modal.returnValue;
});
// esc
modal.addEventListener('cancel', () => {
  // something
});

notes:

通过::backdrop伪元素可以为背景遮罩设置样式

dialog::backdrop{
  background-color: rgba(0, 0, 0, 0.4);
}

可以监听dialog的click事件,做到点击背景遮罩就能关闭模态框(当然这个可能不是完美的玩法):

modal.addEventListener('click', (event) => {
  if (event.target === modal) {
    modal.close('cancelled');
  }
});

Browser compatibility

目前,PC端只有Chrome,Opera支持,其他的厂家也应该会很快支持。不过也不用担心,可以通过dialog-polyfill(https://github.com/GoogleChrome/dialog-polyfill) 来兼容到IE9+

Polyfill

安装的方式可以通过npm也可以通过常规的script标签来引入。当使用polyfill的时候,每个对话框都需要初始化一次。

dialogPolyfill.registerDialog(modal);

在低版本的浏览器是不支持伪元素的,polyfill会添加一个新的元素来充当backdrop。样式上得再加上:

dialog + .backdrop {
  background-color: rgba(0, 0, 0, 0.4);
}

完整的demo在这里(https://codepen.io/keithjgrant/pen/eyMMVL?editors=0101

网友评论

登录后评论
0/500
评论
毋闲
+ 关注