html5的Message信息提示框

Posted 2021-11-11 zhusf

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();