<html>
<head>
<meta charset="UTF-8" />
</head>

<button onclick="showDialog()">点击弹出对话框</button>

<dialog id="myDialog" class="modern-dialog">
  <div class="dialog-header">
    <h3>系统提示</h3>
    <button onclick="closeDialog()">×</button>
  </div>
  <p>这是一个模态对话框示例！</p>
  <button class="confirm-btn" onclick="closeDialog()">确定</button>
</dialog>

<style>
.modern-dialog {
  border: none;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,