用原生html与js写一个dialog

实现效果：

HTML代码：

<body>
    <button onclick="showDialog()">点击展示dialog</button>
    <dialog class="dialog">
        <div class="dialog-header">
            这是标题
            <div class="close-btn" onclick="closeDialog()"></div>
        </div>
        <div class="dialog-content">
            这里是内容
        </div>
    </dialog>
</body>

CSS代码：

.dialog {
        height: 400px;
        width: 600px;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        position: absolute;
        border: none;
        border-radius: 20px;
        padding: 0 20px;
    }
    .dialog-header {
        height: 50px;
        width: 100%;
        line-height: 50px;
        position: relative;
        border-bottom: rgb(180, 179, 179) 1px solid;
    }
    .close-btn {
        width: 30px;
        height: 100%;
        display: inline-block;
        position: absolute;
        right: 0px;
        cursor: pointer;
        background: url('../test/close.png') no-repeat 50% 50%;
    }

JS代码：

function showDialog() {
    // 展示
    document.getElementsByClassName('dialog')[0].showModal();
}
function closeDialog() {
    // 隐藏
    document.getElementsByClassName('dialog')[0].close();
}

转自：https://blog.csdn.net/DZY_12/article/details/112271687