来自 澳门威尼斯人平台 2019-12-04 16:28 的文章
当前位置: 澳门威尼斯人平台 > 澳门威尼斯人平台 > 正文

HTML5 的新的表单元素

一起来看 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

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

对话框是web项目中用于用户交互的重要部分,我们最常见的就是js中 alert(),confirm(),但是这个对话框的不美观,也不能自定义样式,所以在开发的过程中,一般根据自己自己的需求造轮子或者使用第三方的。

HTML5 拥有若干涉及表单的元素和属性。

基本操作

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

对话框的组成

常见的弹出框形式:

位置:屏幕的左上角,右上角,左下角,右下角,垂直居中等

大小:定宽定高,定宽不定高,不定宽不定高等

开发中的对话框形式就是位置和大小随机组合的一种情况。

但是有一种情况(不定宽高的垂直居中)不易实现(可以使用display:table或css3的translate或flex实现),具体可参考水平垂直居中布局

上面的对话框包含内容的容器,还有一个是对话框下面的遮罩层,遮罩层是用户触发弹出框后,形成的一个对话框与页面主体的分割图层,它的存在可以给用户一个更明显的视觉差效果,同时也起到避免用户触发对话框后的其他不必要的页面主体操作,从而产生更有的用户体验。

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

浏览器支持和 Polyfill

目前,只有 chrome 支持 ``

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

澳门威尼斯人平台 3

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

幸运的是,我们可以使用 dialog-polyfill 来缓解这种尴尬,它既提供了 JavaScript 的行为,也包含了默认的样式,我们可以使用 npm 来安装它,也可以使用 ` 标签来引用它。目前,它已支持各主流浏览器,包括IE 9` 及其以上版本

只是,在使用它时,每个 dialog 需要使用下面语句进行初始化

dialogPolyfill.registerDialog(dialog);

1
dialogPolyfill.registerDialog(dialog);

并且,它并不会取代浏览器原生的行为

存在问题

虽然,有很多对话框的轮子供我们选择,但是我们面临着各种各样的问题。

  • 到底选择哪一种对话框(对于有选择综合症的人来说一个头疼的问题)
  • 可用性(api的简单与否,是否依赖了其他第三方的库)
  • 澳门威尼斯人平台,可扩展性
  • 浏览器的兼容性支持

那么,有没有一个简单的方法来做做一个对话框呢?当然有,我们可以使用HTML5的 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 里添加更多的内容,一般包括 headerbodyfooter

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>

HTML5

<dialog open> <h2> Hello world.</h2></dialog>

很简单,我们使用上面的代码就可以做一个弹出内容为‘Hello world.’ 的对话框。

控制对话框的显示/隐藏也很容易,添加 open 属性表示显示,去除为隐藏。当然,我们也可以通过DOM接口来控制 dialog 的显隐, close

对话框下面的遮罩层,我们可以使用 ::backgrop 伪元素,而它的激活,我们需要使用 showModal() 这个DOM的API,::backgrop 的特性是它的位置在dialog之下,在任何 z-index 之上。

使用 showModal() 不仅可以让遮罩层显示,dialog容器也显示,所以用到 ::backdrop 的时候,可以用 showModal() 代替 show() 这个API;如果按键盘 ESC 键将关闭弹出层,当然你一可以使用 close() 这个DOM API。

我们可以设置 ::backdrop 这个图层为半透明图层,代码如下:

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

除了我们常见的提示信息的弹出层外,还有一类比较使用的是带表单的弹出层。

浏览器支持

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

本文由澳门威尼斯人平台发布于澳门威尼斯人平台,转载请注明出处:HTML5 的新的表单元素

关键词: