我正在研究模态框。当我制作单独的 html 和 css 文件来测试它时，它工作得很好。问题是当我将该代码放入我正在处理的网页的 html 和 css 中时，模态框没有出现，唯一显示的是模态容器的深色覆盖。帮助将不胜感激。谢谢。仅模态const open = document.getElementById("open");const modalContainer = document.getElementById("modal-container");const close = document.getElementById("close");open.onclick = function() { modalContainer.style.display = "block";};close.onclick = function() { modalContainer.style.display = "none";};.modal-container { background-color: rgba(0, 0, 0, 0.4); position: fixed; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; overflow: auto; display: flex; justify-content: center; align-items: center; font-family: fantasy; display: none;}.modal { background-color: whitesmoke; width: 35%; height: 90%; margin: 5% auto; padding: 20px 40px; box-shadow: 5px 5px 5px gray; border-radius: 10px;}.modal span { display: flex; justify-content: flex-end; margin-right: -15px; cursor: pointer;}<!DOCTYPE html><html><head> <link rel="stylesheet" href="modal.css"></head><body> <button id="open" onclick="openModal()">open modal</button> <div class="modal-container" id="modal-container"> <div class="modal"> <span id="close">×</span> <h1>Swimming Pools (Drank)</h1> <hr> <p>Pour up, drank, head shot, drank <br> Sit down, drank, stand up, drank <br> Pass out, drank, wake up, drank <br> Faded, drank, faded, drank</p> </div> </div></body></html>
1 回答
白猪掌柜的
TA贡献1893条经验 获得超10个赞
Boostrap StyleSheets 可能是造成这种情况的原因。BS 有一个原生的“模态”类，它可能会与您的自定义模态产生冲突。
尝试将 BS cdn 添加到您的清晰示例中，这样您就会知道这是否是问题所在：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="modal.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<button id="open" onclick="openModal()">open modal</button>
<div class="modal-container" id="modal-container">
<div class="modal">
<span id="close">×</span>
<h1>Swimming Pools (Drank)</h1>
<hr>
<p>Pour up, drank, head shot, drank <br> Sit down, drank, stand up, drank <br> Pass out, drank, wake up, drank <br> Faded, drank, faded, drank</p>
</div>
</div>
</body>
</html>
如果是问题所在，您可以将课程重命名为“模态”
CSS：
.custom-modal {
background-color: whitesmoke;
width: 35%;
height: 90%;
margin: 5% auto;
padding: 20px 40px;
box-shadow: 5px 5px 5px gray;
border-radius: 10px;
}
.custom-modal span {
display: flex;
justify-content: flex-end;
margin-right: -15px;
cursor: pointer;
}
网址：
<div class="modal-container" id="modal-container">
<div class="custom-modal">
<span id="close">×</span>
<h1>Swimming Pools (Drank)</h1>
<hr>
<p>Pour up, drank, ...</p>
</div>
添加回答
举报
0/150
提交
取消