Div 本身工作得很好，但在合并到项目中时却没有
我正在研究模态框。
当我制作单独的 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回答
-
白猪掌柜的
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>
随时随地看视频慕课网APP
相关分类
JavaScript