js中实现dialog
使用 <dialog> HTML 元素
HTML5 提供了原生 <dialog> 元素，可以直接通过 JavaScript 控制显示和隐藏。现代浏览器均支持该特性。
<dialog id="myDialog">
<p>这是一个原生 dialog 示例</p>
<button onclick="document.getElementById('myDialog').close()">关闭</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">打开 Dialog</button>通过 showModal() 方法打开对话框会伴随背景遮罩层，且默认禁止与背景内容交互。使用 close() 方法关闭对话框。
通过 CSS 和 JavaScript 模拟
对于需要兼容旧浏览器的场景，可以通过 CSS 和 JavaScript 模拟对话框行为：
<div id="myCustomDialog" class="dialog">
<div class="dialog-content">
<p>自定义 dialog 示例</p>
<button class="close-btn">关闭</button>
</div>
</div>
<button class="open-btn">打开 Dialog</button>.dialog {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
align-items: center;
justify-content: center;
}
.dialog-content {
background: white;
padding: 20px;
border-radius: 5px;
}const dialog = document.getElementById('myCustomDialog');
document.querySelector('.open-btn').addEventListener('click', () => {
dialog.style.display = 'flex';
});
document.querySelector('.close-btn').addEventListener('click', () => {
dialog.style.display = 'none';
});使用第三方库
流行的 UI 库通常提供现成的 Dialog 组件：
使用 Dialog 组件示例（React + Material-UI）
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';
function MyDialog() {
const [open, setOpen] = React.useState(false);
return (
<div>
<Button onClick={() => setOpen(true)}>打开 Dialog</Button>
<Dialog open={open} onClose={() => setOpen(false)}>
<DialogTitle>对话框标题</DialogTitle>
<DialogContent>对话框内容</DialogContent>
<DialogActions>
<Button onClick={() => setOpen(false)}>关闭</Button>
</DialogActions>
</Dialog>
</div>
);
}Vue 中使用 Element Plus
<template>
<el-button @click="dialogVisible = true">打开 Dialog</el-button>
<el-dialog v-model="dialogVisible" title="提示">
<span>这是一段内容</span>
<template #footer>
<el-button @click="dialogVisible = false">关闭</el-button>
</template>
</el-dialog>
</template>
<script setup>
import { ref } from 'vue'
const dialogVisible = ref(false)
</script>对话框最佳实践
确保对话框具有明确的关闭方式，包括右上角关闭按钮、ESC 键关闭和外部点击关闭（对于非模态对话框）。
为对话框添加适当的 ARIA 属性以提升无障碍体验：
<dialog aria-labelledby="dialogTitle">
<h2 id="dialogTitle">对话框标题</h2>
<!-- 内容 -->
</dialog>对于复杂交互，考虑使用状态管理工具控制对话框的打开/关闭状态，避免直接操作 DOM。
