我是 javascript 的新手。现在我正在做一个元素，允许用户在我的网站上添加和删除公园。为此，我想要一个弹出窗口，允许他们输入州和公园名称以添加或删除。我正在尝试添加 2 个模态框，一个用于添加，一个用于删除。但是，因为我在 2 个单独的 js 文件中执行此操作，所以只调用了 remove，并且为它们两个都调用了它。
这是我的一些html
<body id="page-dash" class="container">
<div class="one">
<ul class="vertical">
<li id="addBtn" class="vertical"><a href="#">Add a Park</a><br></li>
<li id="remBtn" class="vertical"><a href="#">Remove a Park</a><br></li>
<li id="updateBtn" class="vertical"><a href="#">Update List</a><br></li>
<li id="passBtn" class="vertical"><a href="#">Reset Password</a><br></li>
</ul>
</div>
<div id="stateParkList" class="two">
<p id="desc">List of states and their National Parks.</p>
</div>
<!-- Pop Up Window -->
<div id="addWindow">
<div id="popUp-add" class="popUp">
<div class="popUp-content">
<span class="close">×</span>
<form id="Form">
<p>Add Park</p><br>
<p>State:</p>
<input type="text" id="state"><br>
<p>National Park:</p>
<input type="text" id="park"><br>
<button onclick="addPark()">Submit</button>
</form>
</div>
</div>
<div id="remWindow">
<div id="popUp-rem" class="popUp">
<div class="popUp-content">
<span class="close">×</span>
<form id="Form">
<p>Remove Park</p><br>
<p>State:</p>
<input type="text" id="state"><br>
<p>National Park:</p>
<input type="text" id="park"><br>
<button onclick="remPark()">Submit</button>
</form>
</div>
</div>
<footer>© Copyright CS234-SIUe-Spring 17. All rights reserved.</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="../js/parks.js"></script>
<script src="../js/add.js"></script>
<script src="../js/remove.js"></script>
这是 add.js:
var modal = document.getElementById('popUp-add');
var btn = document.getElementById("addBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
remove.js:
var modal = document.getElementById('popUp-rem');
var btn = document.getElementById("remBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
和 CSS:
/*Pop up window in dashboard*/
.popUp {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.popUp-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 15%;
height: 23%;
font-size: 18px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
margin-top: -7%;
margin-right: -5%;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
form#Form input{
border: 1pt solid black;
}
form#Form input{
margin-bottom: 5%;
}
最佳答案
您的代码有两个问题。
您在全局(窗口)范围内定义所有变量，这会导致意外更改。在
中赋值的add.js中定义了三个变量modal,btn和span，在中是完全一样的remove.js。因为你后面加载了remove.js，三个变量的实际值是后面在remove.jsvar modal = document.getElementById('popUp-rem'); var btn = document.getElementById("remBtn"); var span = document.getElementsByClassName("close")[0];您可以使用 function scope和 IIFE避免全局命名空间污染
你应该使用 addEventListener而不是
onclick当您需要将多个事件添加到同一个 dom 元素时，在这种情况下是window和span。因为绑定(bind)事件onclick会在较新的分配后被覆盖。因此onclick只会响应最新的函数，在这种情况下只会调用remove.js中的函数.
你应该这样修改你的代码
添加.js
(function() {
var modal = document.getElementById('popUp-add');
var btn = document.getElementById("addBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.addEventListener('click',function() {
modal.style.display = "none";
})
window.addEventListener('click',function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
})
})()
删除.js
(function() {
var modal = document.getElementById('popUp-rem');
var btn = document.getElementById("remBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.addEventListener('click',function() {
modal.style.display = "none";
})
window.addEventListener('click',function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
})
})()
另外一件事，如果您的网站需要与 IE 兼容，请考虑使用 attachEvent相反。
关于javascript - 2 个相似的模态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42941677/