我对javascript很陌生，我正在尝试使用模式框获取个人资料信息。我正在此基础上建立的网站确实是一个拖放界面。 我已经打开了所有模态，但是它并不会总是关闭所有模态。请注意，以下代码包含在拖放网站的html区域中。到目前为止，尽管我对此持开放态度，但仍避免使用全局Java。我只是不想搞砸。欢迎所有建议。 这是我的代码：
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
background-color: #ffffff;
}
.title {
color: grey;
font-size: 18px;
}
button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #333192;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px; }
a {
text-decoration: none;
font-size: 22px;
color: black; }
button:hover, a:hover {
background-color: #1b1464; }
body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 12px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0,0,0);
/* Fallback color */
background-color: rgba(0,0,0,0.4);
/* Black w/ opacity */ }
/* Modal Content */
.modal-content {
position: relative;
background-color: #FFFFFF;
margin: auto;
padding: 0px;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s }
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0} to {top:0; opacity:1} }
@keyframes animatetop { from {top:-300px; opacity:0} to {top:0; opacity:1} }
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold; }
.close:hover, .close:focus; cursor: pointer; {
color: #000;
text-decoration: none;}
.modal-header {
padding: 12px;
background-color: #333192;
color: F15C22; }
.modal-body {
padding: 12px;}
.modal-footer {
padding: 12px;
background-color: #F15C22;
color: white; }
.container {
position: relative;
width: 100%; }
a:link {
color: #ffffff; }
.image {
position: relative;
width: 100%;
height: auto; }
.image:hover { opacity: .7; }
</style>
<div class="card">
<a id="patricoloBtn"><img src="http://blog2.iap2usa.org/wp-content/uploads/2018/08/patricolo_francesca_sq.png" alt="Francesca" class="image" style="width:100%"></a>
<h2 class="contStyleHeaderSubtitle" style="font-weight: 300;"><font face="Helvetica">Francesca Patricolo</font></h2>
<p class="title" style="font-family: Arial, Helvetica, sans-serif; font-weight: 300;">Transportation Planner</p>
<p style="font-family: Arial, Helvetica, sans-serif;"><strong>Portland, Oregon</strong></p>
<div style="font-family: Arial, Helvetica, sans-serif; font-weight: 300; margin: 24px 0px;">
<a href="https://www.linkedin.com/in/francesca-patricolo-08855332/" target="_blank"><img src="/resources/Pictures/Site%20Icons/linkedin.png" class="card" alt="Linkedin" title="Linkedin" border="0" width="40" height="40" align="center"></a>
</div>
<p style="font-family: Arial, Helvetica, sans-serif; font-weight: 300;">
联系
<div class="container">
<div id="patricoloModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h3 style="color:#F15C22">Francesca Patricolo</h3>
</div>
<div class="modal-body">
<p><img src="http://blog2.iap2usa.org/wp-content/uploads/2018/08/patricolo_francesca_sq.png" alt="Francesca" style="max-width: 210px; margin: 10px; border-radius: 50%;" align="left"><strong>What field do you work in?</strong></p>
<p>Transportation Planning</p>
<p><strong>What kinds of work do you do?</strong></p>
<p>Long range planning, public policy, regional coordination</p>
<p><strong>How many years have you been doing this work?</strong></p>
<p>10</p>
<p><strong>What's your favorite Core Value and why?</strong></p>
<p>#7: Public participation communicates to participants how their input affected the decision. -A KEY trust-builder! It's not done until we communicate back.</p>
<p><button><a href="mailto:francesca.patricolo@portlandoregon.gov" target="blank"><font color="#FFFFFF">Contact</font></a></button></p>
</div>
<div class="modal-footer"></div>
</div>
<script type="text/javascript">
/*** Get the modal***/ var patricoloModal = document.getElementById('patricoloModal');
/*** Get the button that opens the modal ***/ var patricoloBtn = document.getElementById("patricoloBtn");
/*** Get the <span> element that closes the modal***/ var span = document.getElementsByClassName("close");
/*** When the user clicks the button, open the modal***/
patricoloBtn.onclick = function() { patricoloModal.style.display = "block"; }
/*** When the user clicks on <span> (x), close the modal ***/ span.onclick = function() { modal.style.display = "none"; }
/*** When the user clicks anywhere outside of the modal, close it***/ window.onclick = function(event) { if (event.target == patricoloModal) { patricoloModal.style.display = "none"; } }
</script>
答案 0 :(得分：0)
删除用于显示模式的Javascript，这不是正确的方法。
替换此
<a id="patricoloBtn"><img src="path" alt="Francesca" class="image" style="width:100%"></a>
使用
<a data-toggle="modal" data-target="#patricoloModal"><img src="path" alt="Francesca" class="image" style="width:100%"></a>
答案 1 :(得分：0)
要将事件侦听器添加到多个元素，必须执行以下操作：
var span = document.getElementsByClassName("close");
span.forEach(span => span.addEventListener("click", closeModal);
因此，代码如下：
/*** Get the modal***/
var patricoloModal = document.getElementById('patricoloModal');
/*** Get the button that opens the modal ***/
var patricoloBtn = document.getElementById("patricoloBtn");
/*** Get the <span> element that closes the modal***/
var span = document.getElementsByClassName("close");
/*** When the user clicks the button, open the modal***/
span.forEach(span => span.addEventListener("click", closeModal));
/*** When the user clicks on <span> (x), close the modal ***/
function closeModal() {
particoloModal.style.display = "none";
}
/*** When the user clicks anywhere outside of the modal, close it***/
document.body.addEventListener("click", (event)=>{
// IF THE CLICKED TARGET IS NOT EQUAL TO THE PARTICOLO MODEL
if(event.target !== particoloModal) {
particoloModal.style.display = "none";
}
})
希望这对您有用。