联合来看 HTML 5.2 中新的原生元素 dialog
不到一个月前,
HTML 5.2
正式成为W3C
的引荐标准(REC
),其中,推出了一个新的原生模态对话框元素
,乍一看,可能感觉它就是一个猛增的要素,然则,作者如今在玩的时候,发现它实在是一个值得期待和很有趣的因素,在这边享受给我们
这是 “ 最基础的示范
XHTML
<dialog open> Native dialog box! </dialog>
1
2
3
|
<dialog open>
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();
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
元素进行相互
浏览器协理和 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); }
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
里添加更多的情节,一般包括 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>
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
的点击,当 target
为 modal
时来关闭它
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
是可见的,倘若没有 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,欢迎参考