HTML5.2新标签 —— dialog

原文地址

前言

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

举个栗子

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

以上就是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↓：

最后一个栗子

参考资料