gpt4 book ai didi

javascript - 正确的语义使模态叠加层在单击 div 时消失

转载 作者:行者123 更新时间:2023-11-28 01:05:15 24 4
gpt4 key购买 nike

我正在处理模态,我希望在单击背景时使模态覆盖消失。

function dismissModal() {
document.getElementById("modal").classList.remove("modal-overlay");
}
.modal-overlay {
background-color: rgba(0, 0, 0, .5);
bottom: 0;
display: block;
left: 0;
overflow: hidden;
position: fixed;
right: 0;
top: 0;
z-index: 1;
}

.modal-content {
background-color: #fff;
height: 20em;
width: 20em;
margin: auto;
}
<section id="modal" class="modal-overlay" onclick="dismissModal()">
<div class="modal-content">
<h1>Example Code</h1>
</div>
</section>

制作具有 onClick 属性的 div 或部分对于语义来说不是很好,但我不想将整个模式部分包装在按钮或 anchor 标记中。

在这样的用例中,人们通常会做什么来避免 div 或部分类中的 onClick?

最佳答案

希望以下代码段对您有所帮助。

function dismissModal() {
document.getElementById("modal").classList.toggle("modal-overlay");
document.getElementById("modal").classList.toggle("modal-hidden");
}
.modal-overlay {
background-color: rgba(0, 0, 0, .5);
bottom: 0;
display: block;
left: 0;
overflow: hidden;
position: fixed;
right: 0;
top: 0;
z-index: 1;
}

.modal-content {
background-color: #fff;
height: 20em;
width: 20em;
margin: auto;
}
.modal-hidden{
display:none;
}
<section id="modal" class="modal-overlay" onclick="dismissModal()">
<div class="modal-content">
<h1>Example Code</h1>
</div>
</section>
<button onclick="dismissModal()">Show Modal</button>

关于javascript - 正确的语义使模态叠加层在单击 div 时消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52416083/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com