HTML5 新屬性dialog

 新的dialog屬性目前好像就支持google瀏覽器，不過還是先嚐爲盡！別的不說先上代碼。

 先看html，

<div class="container">
      <h1>dialog</h1>
      <button id="open-modal" type="button" class="btn">快來點我吖!</button>
      <dialog id="sweet-modal">
          <h3 class="modal-header">sweet modal</h3>
          <div class="modal-body">
                This is a new dialog!
          </div>
          <div class="modal-footer">
              <button id="get-it" type="button">Get</button>
          </div>
      </dialog>
      <p>
         <b>returnValue:</b><span id="return-value"></span>

</p>

</div> <dialog></dialog>內就是新的對話框，默認情況下，要在dialog屬性上加open，纔可以使用，否則默認是關閉的。

如：<dialog open></dialog>。

 再給他加上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);
            }
        });

 以上就是完整的代碼，在貼上效果圖，完美！