74 lines
2.2 KiB
HTML
74 lines
2.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Dialog Multi-Level Demo</title>
|
|
<style>
|
|
dialog {
|
|
border: none;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
width: 300px;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<button id="openFirst">打开第一个弹窗</button>
|
|
|
|
<div class="dialog-wrapper" id="wrapper1" style="display: none">
|
|
<div class="backdrop"></div>
|
|
<dialog id="dialog1">
|
|
<p>这是第一个弹窗</p>
|
|
<button id="openSecond">打开第二个弹窗</button>
|
|
<button id="closeFirst">关闭</button>
|
|
</dialog>
|
|
</div>
|
|
|
|
<div class="dialog-wrapper" id="wrapper2" style="display: none">
|
|
<div class="backdrop"></div>
|
|
<dialog id="dialog2">
|
|
<p>这是第二个弹窗</p>
|
|
<button id="closeSecond">关闭</button>
|
|
</dialog>
|
|
</div>
|
|
|
|
<script>
|
|
const openFirstBtn = document.getElementById('openFirst')
|
|
const dialog1 = document.getElementById('dialog1')
|
|
const wrapper1 = document.getElementById('wrapper1')
|
|
const openSecondBtn = document.getElementById('openSecond')
|
|
const dialog2 = document.getElementById('dialog2')
|
|
const wrapper2 = document.getElementById('wrapper2')
|
|
const closeFirstBtn = document.getElementById('closeFirst')
|
|
const closeSecondBtn = document.getElementById('closeSecond')
|
|
|
|
// 打开第一个弹窗
|
|
openFirstBtn.addEventListener('click', () => {
|
|
wrapper1.style.display = 'block'
|
|
dialog1.show() // 注意：这里用 show() 而不是 showModal()
|
|
})
|
|
|
|
// 打开第二个弹窗
|
|
openSecondBtn.addEventListener('click', () => {
|
|
wrapper2.style.display = 'block'
|
|
dialog2.show() // 用 show() 避免冲突
|
|
})
|
|
|
|
// 关闭第一个弹窗
|
|
closeFirstBtn.addEventListener('click', () => {
|
|
dialog1.close()
|
|
wrapper1.style.display = 'none'
|
|
})
|
|
|
|
// 关闭第二个弹窗
|
|
closeSecondBtn.addEventListener('click', () => {
|
|
dialog2.close()
|
|
wrapper2.style.display = 'none'
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|