<!DOCTYPE html>
<html>
<head>
<title>对话框系统</title>
<style>
.dialog {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
padding: 20px;
background-color: #f1f1f1;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
</head>
<body>
<button οnclick="openDialog('message')">打开对话框</button>
<div id="message" class="dialog">
<h2>对话框标题</h2>
<p>这里是对话框的内容。</p>
<button οnclick="closeDialog('message')">关闭</button>
</div>
<script>
function openDialog(id) {
var dialog = document.getElementById(id);
dialog.style.display = 'block';
}
function closeDialog(id) {
var dialog = document.getElementById(id);
dialog.style.display = 'none';
}
</script>
</body>
</html>