我可以得到一个HTML/CSS/JS模态隐藏，但当显示它没有正确定位或有bg-color或边界 &g

我假设我的JS和HTML是正确的。我把完整的代码放进去，不太长，这样就能看到整个问题。我复制了几个网站的CSS策略，但无济于事。我确实尝试过一些信誉良好的网站，比如W3Schools和javascript.plainenglish.io。

我哪里错了?我不知道在#modalContent中放入什么CSS，我认为我在#modalContainer中放入的CSS以我不理解的方式影响了#modalContent。我的问题是我的模态内容的文本一直被推到模态窗口的左上角，它没有自己的窗口来容纳模态内容。否则，当模式未被隐藏时，背景覆盖了整个屏幕，看起来工作得很好。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>Modal Popup</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie-edge" />
<!-- <link rel="stylesheet" href="eric_meyer_reset_2.css" /> -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="wrapper">
<header>
<h1>JavaScript Modal Popup</h1>
</header>
<div id="modalButtonDiv">
<button id="modalButton">OpenModal</button>
</div>
<div id="modalContainer">
<div id="modalContent">
<span id="redX">&times;</span>
<h1>Modal Title</h1>
<p>Modal content goes here</p>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>

CSS

@charset "utf-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
max-width:1680px;
height: 100vh;
background-color: rgb(211,211,211);
}
#wrapper {
background-color: white;
min-height: 100%;
width: 90%;
margin: 0 auto;
}
header > h1 {
font-size: 2rem;
font-weight: bold;
padding: 0.67rem 0;
text-align: center;
}
#modalButtonDiv {
text-align: center;
}
#modalButton {
background-color: rgb(28, 132, 56);
font-weight: bold;
width: 100px;
padding: 0.5rem 0;
line-height: 1.5rem;
vertical-align: middle;
border: 0;
border-radius: 4px;
margin: 15px 0;
}
#modalContainer {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
z-index: 1;
background-color: rgba(0,0,0,0.4);
}
#modal-content {
background-color: white;
width: 450px;
position: relative;
}

JavaScript

const openModalButton = document.getElementById("modalButton");
const closeRedX = document.getElementById("redX");
const modalContainer = document.getElementById("modalContainer");
let openModal = function () {
modalContainer.style.display = "block"
};
openModalButton.addEventListener("click", openModal);
let closeModal = function (event) {
if (event.target === modalContainer) {
modalContainer.style.display = "none"
}
};
window.addEventListener("click", closeModal);
let xCloseModal = function () {
modalContainer.style.display = "none";
}
closeRedX.addEventListener("click", xCloseModal);

重申一下，我不能在#modalContainer和/或#modalContent中添加任何内容，这样我的模态窗口就会显示其中的文本，现在只有#modalContainer的背景在工作，模态窗口的关闭也在工作。

我像这样编辑了你的代码，

const openModalButton = document.getElementById("modalButton");
const closeRedX = document.getElementById("redX");
const modalContainer = document.getElementById("modalContainer");
let openModal = function() {
modalContainer.style.display = "block";
};
openModalButton.addEventListener("click", openModal);
let closeModal = function(event) {
if (event.target === modalContainer) {
modalContainer.style.display = "none";
}
};
window.addEventListener("click", closeModal);
let xCloseModal = function() {
modalContainer.style.display = "none";
}
closeRedX.addEventListener("click", xCloseModal);

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
margin: 20px;
}

#modalButtonDiv {
text-align: center;
}

#modalButton {
background-color: rgb(37, 140, 102);
width: 100px;
padding: 0.5rem 0;
border-radius: 3px;
font-weight: bold;
}

#modalContainer {
display: none;
z-index: 1;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.4);
}

#modalContent {
background-color: white;
padding: 20px;
margin: 15%;
border: 1px solid black;
width: 80%;
}

#redX {
background-color: red;
color: white;
font-weight: bold;
float: right;
cursor: pointer;
width: 40px;
height: 40px;
font-size: 36px;
text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>

</style>
</head>
<body>
<div id="modalButtonDiv">
<button id="modalButton">OpenModal</button>
</div>
<div id="modalContainer">
<div id="modalContent">
<span id="redX">&times;</span>
<h1>Modal Title</h1>
<p>Modal content goes here</p>
</div>
</div>
<script>

</script>
</body>
</html>

#modalContainer {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
z-index: 1;
background: red;
}

#modalContent {
background-color: rgba(000, 00, 0, 0.5);
width: 100%;
height: 100%;
position: relative;

}

#redX {
background-color: red;
color: white;
font-weight: bold;
float: right;
cursor: pointer;
width: 40px;
height: 40px;
font-size: 36px;
text-align: center;
}

你也可以得到这样的背景色!!

我在HTML中调用了modalContent，在CSS中调用了modal-content。

相关内容

最新更新

热门标签：