JavaScript 练手小技巧：HTML5 的 dialog 标签制作对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dialog 练习</title>
<style>
body { font-family: "Segoe UI", Tahoma, Helvetica, Arial, sans-serif; }
dialog { border: 1px solid #ccc; padding: 20px; width: 400px; }
h2 { margin-top: 0; }
</style>
</head>
<body>
<dialog open>
<h2>对话框标题</h2>
<p>这是一个简单的对话框示例。</p>
<button onclick="document.querySelector('dialog').close();">关闭</button>
</dialog>
</body>
</html>这段代码展示了如何使用HTML5的<dialog>标签来创建一个简单的对话框。通过CSS我们给对话框添加了一些样式，并且有一个按钮来关闭对话框。这个示例简单直观，方便用户理解和使用。
评论已关闭