实现效果：
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(); }