html5的Message信息提示框

1.定義dialog

    <dialog id="showDialog">
        <div>您沒有權限訪問本頁面！</div>
    </dialog>

2.樣式

    dialog{
        background-color: #fdf6ec;
        border-color: #faecd8;
        color: #e6a23c;
        top: 150px;
        width: 250px;
        border-radius: 10px;
        border-width: 1px;
        transition: opacity .3s,transform .4s,-webkit-transform .4s;
    }

3.使用方式

// 獲取彈框元素
var dialog = document.getElementsByTagName("dialog")[0],
 openDialog = document.getElementById("open_dialog"),
 closeDialog = document.getElementById("close_dialog");
//打開彈框
dialog.showModal();
//關閉彈框
dialog.close();