菜单

联手来看 HTML 5.2 中新的原生元素

2019年1月4日 - CSS/CSS3

同台来看 HTML 5.2 中新的原生元素 dialog

2018/01/20 · HTML5 ·
dialog

原文出处: Kirsty
TG
   译文出处:Keith   

manbetx2.0手机版 1

不到一个月前,HTML 5.2 正式成为 W3C
的推荐标准(REC),其中,推出了一个新的原生模态对话框元素
,乍一看,可能觉得它就是一个猛增的要素,但是,作者最近在玩的时候,发现它的确是一个值得期待和很有趣的因素,在此间享用给我们

这是 “ 最基础的言传身教

XHTML

<dialog open> Native dialog box! </dialog>

1
2
3
<dialog open>
    Native dialog box!
</dialog>

其中,open 属性表示此时 dialog 是可见的,尽管没有 opendialog
将会隐藏,你能够利用 JavaScipt 将它显现出来,此时,dialog 渲染如下

manbetx2.0手机版 2

绝对定位 于页面之上,就如我辈期待的一律,出现在内容的顶端,并且
水平居中,默认情况下,它 和内容一样宽

原稿地址:Meet the New Dialog
Element

作者:Keith

基本操作

JavaScipt 有几个 方法属性 可以很方便地处理 dialog
元素,使用最多的或是仍旧 showModal()close()

const modal = document.querySelector(‘dialog’); // makes modal appear
(adds `open` attribute) modal.showModal(); // hides modal (removes
`open` attribute) modal.close();

1
2
3
4
5
6
7
const modal = document.querySelector(‘dialog’);
 
// makes modal appear (adds `open` attribute)
modal.showModal();
 
// hides modal (removes `open` attribute)
modal.close();

当你利用 showModal() 来打开 dialog 时,将会在 dialog
周围加一层阴影,阻止用户与 非 diglog 元素的交互,默认情形下,阴影是
完全透明 的,你可以采纳 CSS 来修改它

Esc 能够关闭 dialog,你也得以提供一个按钮来触发 close()

再有一个方法是 show(),它也得以让 dialog 显现,但与 showModal()
不同的是它并未影子,用户可以与非 dialog 元素举行交互

manbetx2.0手机版 3

浏览器协助和 Polyfill

目前,只有 chrome 支持 “

`,Firefox需要在about:config里允许dom.dialog_element.enabled才能正常使用,我猜想,Firefox` 在不久的未来就会援助

manbetx2.0手机版 4

上图为 caniuse.com 关于 dialogmanbetx2.0手机版,
特性主流浏览器的匹配状况

幸运的是,我们得以接纳
dialog-polyfill
来缓解这种两难,它既提供了 JavaScript
的表现,也蕴藏了默认的体裁,我们可以运用 npm 来安装它,也足以动用 `
标签来引用它。目前,它已支持各主流浏览器,包括
IE 9` 及其以上版本

只是,在使用它时,每个 dialog 需要动用上面语句举行初叶化

dialogPolyfill.registerDialog(dialog);

1
dialogPolyfill.registerDialog(dialog);

与此同时,它并不会取代浏览器原生的行为

不到一个月前,HTML 5.2 正式成为 W3C
的推荐标准(REC),其中,推出了一个新的原生模态对话框元素
<dialog>,乍一看,可能感觉它就是一个增产的要素,然则,作者近年来在玩的时候,发现它真的是一个值得期待和很有趣的因素,在这边享受给我们

样式

开辟和关闭模态框是最中央的,但那是自然不够的,“

最开始时样式是不怎么好看的,因此,我们需要自定义它的样式,此外,我们可以通过设置伪元素
`::backdrop` 来优化

“ 显现时背影的体裁

dialog { padding: 0; width: 478px; text-align: center; vertical-align:
middle; border-radius: 5px; border: 0; } dialog::backdrop {
background-color: rgba(0, 0, 0, 0.1); }

1
2
3
4
5
6
7
8
9
10
11
12
dialog {
    padding: 0;
    width: 478px;
    text-align: center;
    vertical-align: middle;
    border-radius: 5px;
    border: 0;
}
 
dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.1);
}

为了配合老的浏览器,使用 polyfill 时,::backdrop 是不起成效的,但
polyfill 会在 dialog 前面添加一个 .backdrop
元素,我们得以像下面这样定位它

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

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

接下去,是时候向 bialog 里添加更多的内容,一般包括 headerbody
footer

XHTML

<dialog id=”sweet-modal”> <h3 class=”modal-header”>sweet
dialog</h3> <div class=”modal-body”> <p>This is a
sweet dialog, which is much better.</p> </div> <footer
class=”modal-footer”> <button id=”get-it”
type=”button”>Get</button> </footer> </dialog>

1
2
3
4
5
6
7
8
9
<dialog id="sweet-modal">
    <h3 class="modal-header">sweet dialog</h3>
    <div class="modal-body">
        <p>This is a sweet dialog, which is much better.</p>
    </div>
    <footer class="modal-footer">
        <button id="get-it" type="button">Get</button>
    </footer>
</dialog>

这是 <diglog> 最基础的以身作则

末尾,在增长一些 CSS,你就能赢得你想要的

<dialog open>
    Native dialog box!
</dialog>

进阶操作

一般说来,我们愿意能从 dialog 中获得一些用户的信息。关闭 dialog
时,我们得以给 close() 传递一个 string,然后通过 dialog 元素的
returnValue 属性来获取

modal.close(‘Accepted’); console.log(modal.returnValue); // logs
`Accepted`

1
2
3
modal.close(‘Accepted’);
 
console.log(modal.returnValue); // logs `Accepted`

本来,还存在额外的风波大家得以监听,其中,最常用的或者是 close(关闭
dialog 时触发),还有 cancel (用户按 Esc 关闭 dialog 时触发)

此外,咱们也许还愿意点击 dialog
旁边的影子来关闭,当然,这也是有解决办法的。点击阴影会触发 dialog
的点击事件,假若 dialog 的子元素占满了一切
dialog,那么我们可以透过监听 dialog 的点击,当 targetmodal
时来关闭它

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

1
2
3
4
5
modal.addEventListener(‘click’, (event) => {
    if (event.target === modal) {
        modal.close(‘cancelled’);
    }
});

本来,这不是两全的,但它的确是行得通的,如若您有更好的点子,欢迎在评论中互换

其中,open 属性表示此时 dialog 是可见的,假如没有 opendialog
将会隐藏,你可以行使 JavaScipt 将它显现出来,此时,dialog 渲染如下

总结

说了这么多,不如自己实在演练一番,作者也做了一个
demo,欢迎参考

1 赞 2 收藏
评论

manbetx2.0手机版 5

manbetx2.0手机版 6

绝对定位 于页面之上,就如我辈期望的同一,出现在内容的上方,并且
水平居中,默认情形下,它 和内容一样宽

基本操作

JavaScipt 有几个 方法属性 可以很有利地处理 dialog
元素,使用最多的或者依然 showModal()close()

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

// makes modal appear (adds `open` attribute)
modal.showModal();

// hides modal (removes `open` attribute)
modal.close();

当您使用 showModal() 来打开 dialog 时,将会在 dialog
周围加一层阴影,阻止用户与 非 diglog 元素的竞相,默认意况下,阴影是
完全透明 的,你可以利用 CSS 来修改它

Esc 可以关闭 dialog,你也可以提供一个按钮来触发 close()

再有一个办法是 show(),它也足以让 dialog 显现,但与 showModal()
不同的是它从未影子,用户可以与非 dialog 元素举办相互

浏览器协理和 Polyfill

目前,只有 chrome 支持 <dialog>Firefox 需要在 about:config
里允许 dom.dialog_element.enabled 才能正常使用,我猜度,Firefox
在不久的将来就会支撑

manbetx2.0手机版 7

上图为
caniuse.com
关于 dialog 特性主流浏览器的匹配处境

有幸的是,我们可以运用
dialog-polyfill
来缓解这种两难,它既提供了 JavaScript
的一言一行,也蕴藏了默认的体裁,大家得以应用 npm 来安装它,也足以采取
<script> 标签来引用它。近日,它已匡助各主流浏览器,包括 IE 9
及其以上版本

只是,在使用它时,每个 dialog 需要动用下面语句举办开头化

dialogPolyfill.registerDialog(dialog);

与此同时,它并不会代替浏览器原生的作为

样式

开辟和关闭模态框是最中央的,但这是自然不够的,<dialog>
最最先时样式是稍稍美观的,由此,大家需要自定义它的体制,此外,我们得以经过设置伪元素
::backdrop 来优化 <dialog> 显现时背影的体制

dialog {
    padding: 0;
    width: 478px;
    text-align: center;
    vertical-align: middle;
    border-radius: 5px;
    border: 0;
}

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

为了配合老的浏览器,使用 polyfill 时,::backdrop 是不起效用的,但
polyfill 会在 dialog 前面添加一个 .backdrop
元素,大家得以像下边这样定位它

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

接下去,是时候向 bialog 里添加更多的始末,一般包括 headerbody
footer

<dialog id="sweet-modal">
  <h3 class="modal-header">sweet dialog</h3>
  <div class="modal-body">
    <p>This is a sweet dialog, which is much better.</p>
  </div>
  <footer class="modal-footer">
    <button id="get-it" type="button">Get</button>
  </footer>
</dialog>

末尾,在添加一些 CSS,你就能赢得你想要的

进阶操作

通常,我们期待能从 dialog 中拿到一些用户的信息。关闭 dialog
时,我们得以给 close() 传递一个 string,然后经过 dialog 元素的
returnValue 属性来博取

modal.close('Accepted');

console.log(modal.returnValue); // logs `Accepted`

当然,还存在额外的风波我们得以监听,其中,最常用的或者是 close(关闭
dialog 时触发),还有 cancel (用户按 Esc 关闭 dialog 时触发)

此外,我们兴许还愿意点击 dialog
旁边的影子来关闭,当然,这也是有解决办法的。点击阴影会触发 dialog
的点击事件,要是 dialog 的子元素占满了总体
dialog,那么大家可以透过监听 dialog 的点击,当 targetmodal
时来关闭它

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

本来,这不是应有尽有的,但它的确是行之有效的,如若您有更好的不二法门,欢迎在评头论足中沟通

总结

说了如此多,不如自己实际演练一番,作者也做了一个
demo,欢迎参考

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图