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

2018/01/20 · HTML5 ·
dialog

初稿出处： Kirsty
TG 译文出处：Keith

不到一个月前，HTML 5.2 正式成为 W3C
的引荐标准（REC）,其中，推出了一个新的原生模态对话框元素
，乍一看，可能感觉它就是一个猛增的要素，然则，作者如今在玩的时候，发现它实在是一个值得期待和很有趣的因素，在这边享受给我们

这是 “ 最基础的示范

XHTML

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

Native dialog box!

</dialog>

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

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

初稿地址：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();

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 支持 “

`，Firefox需要在about:config里允许dom.dialog_element.enabled才能正常使用，我猜想，Firefox` 在不久的前天就会支撑

上图为 caniuse.com 关于 dialog
特性主流浏览器的配合情况

幸运的是，我们可以利用
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); }

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); }

dialog + .backdrop {

background-color: rgba(0, 0, 0, 0.4);

}

接下去，是时候向 bialog 里添加更多的情节，一般包括 header， body
和 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>

<h3 class="modal-header">sweet dialog</h3>

<p>This is a sweet dialog, which is much better.</p>

</div>

</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`

modal.close(‘Accepted’);

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

自然，还设有额外的轩然大波我们可以监听，其中，最常用的可能是 close（关闭
dialog 时触发），还有 cancel （用户按 Esc 关闭 dialog 时触发）

此外，大家也许还可望点击 dialog
旁边的阴影来关闭，当然，这也是有解决办法的。点击阴影会触发 dialog
的点击事件，尽管 dialog 的子元素占满了任何
dialog，那么我们可以经过监听 dialog 的点击，当 target 为 modal
时来关闭它

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

modal.addEventListener(‘click’, (event) => {

if (event.target === modal) {

modal.close(‘cancelled’);

}

});

当然，这不是完善的，但它确实是实惠的，假如你有更好的法门，欢迎在评价中互换

其中，open 属性表示此时 dialog 是可见的，倘若没有 open，dialog
将会暗藏，你可以使用 JavaScipt 将它显现出来，此时，dialog 渲染如下

总结

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

1 赞 2 收藏
评论

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

基本操作

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
在不久的将来就会支撑

上图为
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 里添加更多的内容，一般包括 header， body
和 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 的点击，当 target 为 modal
时来关闭它

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

理所当然，这不是无微不至的，但它实在是立竿见影的，倘使您有更好的模式，欢迎在评价中交换

总结

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

manbetx2.0手机版

一齐来看 HTML 5.2 中新的原生元素 dialog

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

基本操作

浏览器协理和 Polyfill

样式

进阶操作

总结

基本操作

浏览器补助和 Polyfill

样式

进阶操作

总结

相关文章

发表评论取消回复

一齐来看 HTML 5.2 中新的原生元素 dialog

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

基本操作

浏览器协理和 Polyfill

样式

进阶操作

总结

基本操作

浏览器补助和 Polyfill

样式

进阶操作

总结

相关文章

发表评论 取消回复

发表评论取消回复