一起来看,中新的原生元素

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

2018/01/20 · HTML5 ·
dialog

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

图片 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 渲染如下

图片 2

绝对定位 于页面之上,就好像我们期望的同一,出现在情节的上边,并且
水平居中,默许处境下,它 和内容一样宽

初稿地址:Meet the New Dialog
Element
作者:Keith

HTML5 拥有多少关联表单的元素和总体性。

<header>页眉;
<footer>页脚;
<nav>导航;
<article>文章;
<aside>附属音讯;
<section>部分;
<hgroup>标题组;
<figure>包罗图表、视频、代码示例、图像等<figcaption>为<figure>元素提供文本表明;
允许<a>元素包括块级元素;

基本操作

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 元素进行交互

图片 3

本章介绍以下新的表单元素:

浏览器支持和 Polyfill

目前,只有 chrome 支持 “

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

图片 4

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

万幸的是,大家可以运用
dialog-polyfill
来缓解那种两难,它既提供了 JavaScript
的一颦一笑,也富含了默许的体制,大家得以应用 npm 来安装它,也足以运用 `
标签来引用它。目前,它已支持各主流浏览器,包括
IE 9` 及其以上版本

只是,在使用它时,每个 dialog 需求采取上面语句举办伊始化

dialogPolyfill.registerDialog(dialog);

1
dialogPolyfill.registerDialog(dialog);

与此同时,它并不会顶替浏览器原生的一颦一笑

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

  • datalist
  • keygen
  • output

样式

开拓和倒闭模态框是最主题的,但那是必定不够的,“

最开始时样式是不怎么好看的,因此,我们需要自定义它的样式,此外,我们可以通过设置伪元素
`::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> 最基础的演示

浏览器帮衬

datalist No No 9.5 No No
keygen No No 10.5 3.0 No
output No No 9.5 No No

发表评论

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

网站地图xml地图