HTML5.2新标签 —— dialog

原文地址

前言

继HTML5新增了诸多新的标签之后,HTML5.2又引入了几个现代标签,其中就包括<dialog>标签。 下面跟大家一块学习一下这个标签。

举个栗子

下来看一个最简单的例子↓:

这是一个native弹窗。

以上就是dialog的原生态样式,未添加任何额外样式。这在Chrome和Firefox里表现是一致的,它们各自的默认样式是这样的,基本一致——

Chrome: Firefox:

嫌丑?!如果给它加上瘦脸(去掉默认样式),加上美颜(css),再加上特效(js),一样可以十分性感😄。

两个属性

open

该属性意味着该对话框是可见的,没有它,这个对话框就会隐藏起来,直到你使用JavaScript来显示它,其实就是给它加上了open属性。

returnValue

用来获取close时传入的参数,看下面。

三个方法

show()

showModal()

两个方法相同点都是打开弹窗,即都会给dialog元素添加一个open属性。 不同点:

唯一区别就是show()会按照其在DOM流中的位置显示dialog,没有遮罩,而showModal()会出现遮罩, 并且自动做了按键监控,即点击esc键,弹窗会关闭

大多数情况下,我们会使用便利的showModal()方法来而不使用show()方法。

close()

会关闭弹窗,即会删除open属性,并且可以携带一个参数作为额外数据,传入的值可以通过dialog.returnValue获取。

两个事件

close

当modal关闭的时候触发

cancel

当按下ESC关闭模态框的时候触发

在各事件的事件对象event.target里,同样可以看到close()方法传入的参数,即event.target。returnValue。

一个伪元素

::backdrop

是dialog伪元素,用来设置弹窗遮罩的样式,用法如下

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

浏览器对backdrop也有默认的样式。 chrome:

再举个栗子

提示×
这是一段消息。
这是另一段消息。

部分代码

methods: {
    onShow () {
        this.dialog.showModal();
    }
},

mounted () {
    this.dialog = this.$refs.dialog2;
    let closeBtn = this.dialog.querySelector('.js-close');
    let confirmBtn = this.dialog.querySelector('.js-confirm');
    let cancelBtn = this.dialog.querySelector('.js-cancel');

    //按esc关闭弹窗,同时会触发close事件
    this.dialog.addEventListener('cancel', e => {
        //不写这句也会关闭,这里主要是为了携带数据及演示监听cancel事件
        this.dialog.close('按esc关闭');
    });

    //关闭
    this.dialog.addEventListener('close', e => {
        let returnValue = this.dialog.returnValue;
        this.dialog.returnValue = '';
        returnValue !== '' && this.$notify({
            title: 'returnValue',
            message: returnValue
        });
    });

    //点击遮罩关闭,事件注册在dialog上
    this.dialog.addEventListener('click', (event) => {
        if (event.target === this.dialog) {
            //关闭,并携带数据
            this.dialog.close('点击了遮罩关闭');
        }
    });

    //点×关闭
    closeBtn.addEventListener('click', e => {
        this.dialog.close('点击了关闭');
    });

    //点确定
    confirmBtn.addEventListener('click', e => {
        this.dialog.close('点击了确定');
    });

    //点取消
    cancelBtn.addEventListener('click', e => {
        this.dialog.close('点击了取消');
    });
}
/*改变dialog样式*/
dialog {
    position: fixed;
    margin: 0;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-width: 300px;
    max-width: 80%;
    border: none;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
}
dialog[open] {
    animation: slide-up 0.4s ease-out;
}
/*改变遮罩样式*/
dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}
@keyframes slide-up {
    0% {
        opacity: 0;
        transform: translate(-50%, -40%);
    }
  
    100% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

polyfill

What?!浏览器不支持?手机端没反应?!!

木有关系。这里有一个dialog-polyfill, 通过少许的额外代码,依然可以实现实现上面的功能。 只要引入该js,js中在弹窗对象后面添加一句:

dialogPolyfill.registerDialog(this.dialog);

再引入它的css(很简单)即可。有兴趣的同学可以试试,这里不再赘述~ 不支持的浏览器再试下这个Demo↓:

最后一个栗子

提示×
这是一段消息。
这是另一段消息。

参考资料

欢迎关注

赏不赏,看您心情