彩世界平台-彩世界时时app-彩世界开奖app苹果下载

热门关键词: 彩世界平台,彩世界时时app,彩世界开奖app苹果下载

您的位置:彩世界平台 > 学会党委 > HTML5中dialog元素尝鲜

HTML5中dialog元素尝鲜

发布时间:2019-09-22 08:08编辑:学会党委浏览(79)

    一起来看 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(),但是这个对话框的不美观,也不能自定义样式,所以在开发的过程中,一般根据自己自己的需求造轮子或者使用第三方的。

    基本操作

    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 元素。

    样式

    打开和关闭模态框是最基本的,但这是肯定不够的,``

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

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

    本文由彩世界平台发布于学会党委,转载请注明出处:HTML5中dialog元素尝鲜

    关键词: