HTML5 新属性dialog

 新的dialog属性目前好像就支持google浏览器，不过还是先尝为尽！别的不说先上代码。

 先看html，

      
dialog
      快来点我吖!
      

          
sweet modal
          

                This is a new dialog!
          
          

              Get
          
      
      

         returnValue:

 

内就是新的对话框，默认情况下，要在dialog属性上加open，才可以使用，否则默认是关闭的。

如：

。

 再给他加上css，

body{
            font-family: "Lato", "Helvetica Neue", Helvetica, sans-serif;
        }
        .container{
            margin: 2rem;
        }
        .btn{
            display: inline-block;
            padding: 0 15px;
            height: 32px;
            line-height: 1.5;
            font-weight: 400;
            font-size: 14px;
            text-align: center;
            color: #fff;
            background-color: #1890ff;
            border-color: #1890ff;
            border-radius: 4px;
            border: 1px solid transparent;
            cursor: pointer;
        }
        #sweet-modal{
            padding: 0;
            width: 478px;
            text-align: center;
            vertical-align: middle;
            border-radius: 5px;
            border: 0;
            opacity: 0;
            transform: scale(0.7);
            transition: transform 0.25s, opacity 0.2s, -webkit-transform 0.25s;
        }
        #sweet-modal.modal-active {
            opacity: 1;
            transform: scale(1);
        }

        #sweet-modal + .backdrop {
            background-color: rgba(0, 0, 0, 0.1);
        }

        .modal-header {
            position: relative;
            margin: 0;
            padding: 39px 16px 26px;
            font-size: 27px;
            font-weight: 600;
            text-transform: none;
            line-height: normal;
            text-align: center;
            color: rgba(0, 0, 0, 0.65);
        }

        .modal-body {
            position: relative;
            display: block;
            margin: 0;
            padding: 0 0 32px;
            font-weight: 400;
            font-size: 16px;
            line-height: normal;
            vertical-align: top;
            text-align: center;
            color: rgba(0, 0, 0, 0.64);
            overflow-wrap: break-word;
            box-sizing: border-box;
        }

        .modal-body p {
            margin: 0;
            padding: 10px;
        }

        .modal-footer {
            padding: 26px 16px 13px;
            text-align: right;
            border-radius: inherit;
            border-top: 1px solid rgb(233, 238, 241);
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            background-color: rgb(245, 248, 250);
            overflow: hidden;
        }

        #get-it {
            padding: 10px 24px;
            margin: 0;
            font-weight: 600;
            font-size: 14px;
            border: none;
            border-radius: 5px;
            color: #fff;
            background-color: #7cd1f9;
            cursor: pointer;
            outline: none;
        }

        #get-it:active {
            box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(43, 114, 165, 0.29);
            background-color: #70bce0;
        }

 当然，除了使用属性打开dialog框，还可以使用js。

var modal = document.getElementById('sweet-modal');
 modal.showModal();

 有开当然有关，

 modal.close();

 好了，也不卖最后的关子了，下面就是最终的js控制，加了点特效。

        var modal = document.getElementById('sweet-modal');
        var open = document.getElementById('open-modal');
        var getIt = document.getElementById('get-it');
        var returnValue = document.getElementById('return-value');
        var transition;

        //初始化
        //dialogPolyfill.registerDialog(dialog);

        //打开dialog
        open.addEventListener('click',()=>{
            modal.showModal();
            transition = setTimeout(modal.classList.add('modal-active'),0.5);
        });

        // 点击确认
        getIt.addEventListener("click", () => {
            modal.close("了解");
            modal.classList.remove("modal-active");
            clearTimeout(transition);
        });
        
        //显示returnValue
        modal.addEventListener('close',()=>{
            returnValue.innerHTML = modal.returnValue;
        });

        //点击阴影关闭
        modal.addEventListener('click', (event) => {
            if (event.target === modal) {
                modal.close('取消');
                modal.classList.remove("modal-active");
		        clearTimeout(transition);
            }
        });

 以上就是完整的代码，在贴上效果图，完美！