js showdialog实现
使用 JavaScript 实现对话框
在 JavaScript 中，可以通过多种方式实现对话框功能，包括原生方法、自定义 HTML/CSS 或第三方库。以下是几种常见方法：
原生 alert、confirm 和 prompt
浏览器原生提供了三种简单的对话框：
alert(message)：显示警告对话框，用户需点击“确定”。confirm(message)：显示确认对话框，返回布尔值（确定/取消）。prompt(message, defaultText)：显示输入对话框，返回用户输入的字符串或null。
alert("这是一个警告对话框");
const isConfirmed = confirm("确认操作吗？");
const userInput = prompt("请输入内容", "默认值");自定义 HTML/CSS 对话框
通过 DOM 操作和 CSS 样式创建更灵活的对话框：
<div id="customDialog" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background:white; padding:20px; border:1px solid #ccc;">
<p>这是自定义对话框</p>
<button onclick="closeDialog()">关闭</button>
</div>
<button onclick="showDialog()">打开对话框</button>
<script>
function showDialog() {
document.getElementById("customDialog").style.display = "block";
}
function closeDialog() {
document.getElementById("customDialog").style.display = "none";
}
</script>使用 <dialog> 元素
HTML5 提供了 <dialog> 标签，支持原生模态对话框：
<dialog id="nativeDialog">
<p>这是原生 dialog 元素</p>
<button onclick="document.getElementById('nativeDialog').close()">关闭</button>
</dialog>
<button onclick="document.getElementById('nativeDialog').showModal()">打开</button>第三方库（如 jQuery UI）
使用 jQuery UI 的 dialog 方法快速实现：
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="jqueryDialog" title="对话框标题">
<p>这是 jQuery UI 对话框</p>
</div>
<button id="openDialog">打开</button>
<script>
$("#jqueryDialog").dialog({ autoOpen: false });
$("#openDialog").click(() => $("#jqueryDialog").dialog("open"));
</script>模态与非模态对话框
- 模态对话框：阻止用户与其他页面内容交互（如
showModal()或alert）。 - 非模态对话框：允许用户同时与对话框和页面交互（如
show()方法）。
事件处理
为对话框添加事件监听，例如关闭时触发回调：
const dialog = document.getElementById("nativeDialog");
dialog.addEventListener("close", () => {
console.log("对话框已关闭");
});注意事项
- 原生对话框样式不可定制，且会阻塞线程。
- 自定义对话框需处理焦点管理、遮罩层和键盘交互（如 ESC 关闭）。
<dialog>元素的兼容性需验证（IE 不支持）。
