关闭按钮不会关闭模态

Question

我有一个模态，当用户单击“从这里开始”按钮时打开，在第一个模态上单击下一步后，它会自动转到下三个模态，然后使用表单转到最后一个模态。 我有两个“关闭”点击，一个在第一个模态上，另一个在最后一个模态上。 问题是模态在第一个而不是最后一个上关闭。 我也需要它关闭最后一个。

我的代码在这里：

 // Get the modal var modal = document.getElementById("myModal"); var modal2 = document.getElementById("myModal2"); var modal3 = document.getElementById("myModal3"); var modal4 = document.getElementById("myModal4"); var modal5 = document.getElementById("myModal5"); // Get the button that opens the modal var btn = document.getElementById("myBtn"); var btn2 = document.getElementById("myBtn2"); var btn3 = document.getElementById("myBtn3"); var btn4 = document.getElementById("myBtn4"); var btn5 = document.getElementById("myBtn5"); // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks the button, open the modal btn.onclick = function() { modal.style.display = "block"; } btn2.onclick = function() { modal2.style.display = "block"; setTimeout(() => { modal3.style.display = "block"; }, 4500); setTimeout(() => { modal4.style.display = "block"; }, 8500); setTimeout(() => { modal5.style.display = "block"; }, 12900); } // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; modal2.style.display = "none"; modal3.style.display = "none"; modal4.style.display = "none"; modal5.style.display = "none"; } // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal5) { modal.style.display = "none"; modal2.style.display = "none"; modal3.style.display = "none"; modal4.style.display = "none"; modal5.style.display = "none"; } }

 .showthis { display: block; z-index: 10000 !important; } /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ 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 */ overflow-y: hidden; } /* Modal Content */ .modal-content { background-color: #ededed; margin: auto; padding: 0; border: 6px solid #d1222b; width: 100%; height: 100%; } /* The Close Button */ .close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; padding: 25px; position: absolute; right: 0; } .close:hover, .close:focus { color: #d1222b; text-decoration: none; cursor: pointer; } .mgl-row { display: flex; flex-wrap: nowrap; } .slide-1-img { height: 98.75vh; } .mgl-col-2 { align-self: center; margin: auto; } .mgl-col-2 .content { margin: auto; align-self: center; width: 100%; } .mgl-col-2 .content h2 { color: #d1222b; font-size: 54px; line-height: 64px; padding-right: 100px; margin-top: 50px; } .mgl-col-2 input { width: 100%; background: whitesmoke; border: 0; padding: 10px; } .mgl-col-3 { margin: auto; height: 100vh; margin-top: 100px; text-align: center; width: 100%; } .mgl-col-3 .content { width: 75%; margin: auto; padding-top: 100px; } .mgl-col-3 .content h3 { color: #d1222b; font-size: 21px; margin-top: 75px; } .mgl-col-3 .content h2 { color: #0a314b; font-size: 54px; } .mt-50 { margin-top: 50px; } .progress-line { width: 100px; height: 5px; background: white; margin: 0px 10px; } .progress-line.red-bg { background: #d1222b; } .sm-text { font-size: 14px; line-height: 21px; opacity: .75; } .j-center { align-items: center; justify-content: center; } .modal-btn { padding: 20px 25px; background: #d1222b; color: white; text-transform: uppercase; font-weight: 800; position: relative; transition: all 0.1s linear; } .modal-btn:hover { background: #3c3c3c; color: #fff; } .btn-box { margin-top: 25px; margin-bottom: 25px; } #myModal5 input { width: 35%; border: none; padding: 10px; margin: 10px; } #myModal5 .modal-content { background-image: url('https://www.rsisecurity.com/wp-content/uploads/2021/12/image-2.jpg'); background-color: black; background-size: cover; background-repeat: no-repeat; background-position: center; } #myModal5 h2 { color: white; } #myModal5 h2 span { color: #d1222b; } #myModal5 p { color: #fff; } #myModal5 .btn-box { margin-bottom: 50px; } #myModal5 .rsi-logo { width: 100px; } #myBtn { color: black; } .text-left { text-align: left !important; } /* iPad Pro */ @media (min-width: 992px) and (max-width: 1199px) { .slide-1-img { height: 98.75vh; width: 400px; object-fit: cover; } } /* iPad */ @media (min-width: 760px) and (max-width: 991px) { .slide-1-img { height: 98.75vh; width: 300px; object-fit: cover; } #myModal .mgl-col-2 .content { margin: auto; align-self: center; width: 100%; padding: 0px 25px; } #myModal .mgl-col-2 .content h2 { font-size: 42px; line-height: 52px; padding-right: 0px; } .mgl-col-3 .content h2 { font-size: 36px; } #myModal5 h2 { font-size: 34px; } } /* Mobile Landscape */ @media (min-width: 560px) and (max-width: 759px) {} @media screen and (min-width:992px) {} /* Mobile */ @media only screen and (max-width: 559px) { .mgl-col-1 { display: none; } #myModal .mgl-col-2 .content h2 { color: #d1222b; font-size: 36px; line-height: 46px; padding-right: 0px; margin-top: 50px; margin-bottom: 25px; } #myModal .modal-content { padding-top: 50px; } .btn-box { margin-top: 35px; margin-bottom: 45px; } .mgl-col-3 .content { width: 75%; margin: auto; margin-top: 0; padding-top: 0; } .mgl-col-3 .content h2 { font-size: 21px; line-height: 28px; margin-bottom: 15px; } .mgl-col-3 .content h3 { margin-top: 25px; font-size: 14px; } .mt-50 { margin-top: 35px; } .progress-line { width: 50px; height: 3px; } .mgl-col-3 .content { width: 90%; } #myModal5 input { width: 45%; border: none; padding: 10px; margin: 5px; } .sm-text { font-size: 12px; line-height: 16px; opacity: .75; } #myModal5 h2 { font-size: 26px; } #myModal5 .rsi-logo { width: 75px; margin-bottom: 25px; } } /* iPhone */ @media only screen and (max-width: 375px) {} /* Galaxy S5 */ @media only screen and (max-width: 360px) {} /* iPhone 5 */ @media only screen and (max-width: 320px) {} /* Galaxy Fold */ @media only screen and (max-width: 280px) {}

 <div class="white-outlined-btn width-50 m-auto " id="myBtn">Start Here</div> <!-- The Modal --> <form> <div id="myModal" class="modal" style="display:none;"> <!-- Modal content --> <div class="modal-content"> <span class="close">&times;</span> <div class="mgl-row"> <div class="mgl-col-1"> <img src="https://www.rsisecurity.com/wp-content/uploads/2021/12/image.jpg" alt="free assessment" class="slide-1-img"> </div> <div class="mgl-col-2"> <div class="content"> <img src="https://www.rsisecurity.com/wp-content/uploads/2022/03/rsi-logo.svg" alt="rsi logo" class="rsi-logo"> <h2 class="text-left"> Get your FREE <br> Cyber Risk Score <br> Assessment </h2> <p class="text-left"> Enter URL Below: </p> <input type="text" class="form-control" name="Website" id="Website" placeholder="Enter URL" required="required"> <div class="btn-box"> <a class="modal-btn" id="myBtn2">Start Here</a> </div> <!--p class="sm-text"> By clicking "START HERE" you are accepting <br> lorem ipsum dolor sit amet </p--> </div> </div> </div> </div> </div> <!-- The Modal 2 --> <div id="myModal2" class="modal"> <!-- Modal content --> <div class="modal-content"> <div class="mgl-row"> <div class="mgl-col-3"> <div class="content"> <img src="https://www.rsisecurity.com/wp-content/uploads/2022/03/rsi-logo.svg" alt="rsi logo" class="rsi-logo"> <h3> 01 of 03 </h3> <h2> Checking Network Vulnerability </h2> <!--p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p--> <div class="mgl-row j-center mt-50"> <div class="progress-line red-bg"></div> <div class="progress-line"></div> <div class="progress-line"></div> </div> </div> </div> </div> </div> </div> <!-- The Modal 3 --> <div id="myModal3" class="modal"> <!-- Modal content --> <div class="modal-content"> <div class="mgl-row"> <div class="mgl-col-3"> <div class="content"> <img src="https://www.rsisecurity.com/wp-content/uploads/2022/03/rsi-logo.svg" alt="rsi logo" class="rsi-logo pb-0"> <h3 class="mtop-002"> 02 of 03 </h3> <h2 class="mobile-custom-9372"> Scanning Dark Web Discovery </h2> <!--p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p--> <div class="mgl-row j-center mt-50"> <div class="progress-line red-bg"></div> <div class="progress-line red-bg"></div> <div class="progress-line"></div> </div> </div> </div> </div> </div> </div> <!-- The Modal 4 --> <div id="myModal4" class="modal"> <!-- Modal content --> <div class="modal-content"> <div class="mgl-row"> <div class="mgl-col-3"> <div class="content"> <img src="https://www.rsisecurity.com/wp-content/uploads/2022/03/rsi-logo.svg" alt="rsi logo" class="rsi-logo"> <h3> 03 of 03 </h3> <h2> Web Vulnerability & Generating IP Threat Analysis </h2> <!--p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p--> <div class="mgl-row j-center mt-50"> <div class="progress-line red-bg"></div> <div class="progress-line red-bg"></div> <div class="progress-line red-bg"></div> </div> </div> </div> </div> </div> </div> <!-- The Modal 5 --> <div id="myModal5" class="modal"> <!-- Modal content --> <div class="modal-content"> <span class="close">&times;</span> <div class="mgl-row"> <div class="mgl-col-3" style="margin-top:0px;"> <div class="content"> <img src="https://www.rsisecurity.com/wp-content/uploads/2022/03/logo-white.svg" alt="rsi logo" class="rsi-logo pb-4"> <h2> Generate your FREE <span>Cyber Risk Assessment</span> </h2> <p> Where should we send it to? </p> <input name="First Name" id="First Name" placeholder="First Name" required="required"> <input name="Last Name" id="Last Name" placeholder="Last Name" required="required"> <br> <input name="Company" id="Company" placeholder="Company" required="required"> <input name="Title" id="Title" placeholder="Job Title" required="required"> <br> <input name="email" id="email" placeholder="Email" required="required"> <input name="Phone" id="Phone" placeholder="Phone" required="required"> <div class="btn-box"> <button type="submit" class="modal-btn">Send Report</button> </div> <p class="sm-text"> After submiting this form, please allow up to 48 hours to receive your comprehensive report via email. <br> All information obtained through our website will be utilized internally and will not be sold to any 3rd party entity. </p> </div> </div> </div> </div> </div> </form>

Answer 1

通过在脚本标签中应用下面的代码来尝试下面的代码并删除行var span = document.getElementsByClassName("close")[0]; ，因为它只获取 className 为“close”的第一个元素标记。 所以类名“close”的第二个元素标签不起作用。 您可以通过获取带有类名“close”的第二个标签来声明另一个变量，例如var span1=document.getElementsByClassName("close")[1]并使用 eventHandling 代码。

或者使用可以直接在脚本标签内应用下面的代码。

var span = document.querySelectorAll(".close");
for(var i=0;i<span.length;i++){
    span[i].addEventListener("click",hideSections)
}
function hideSections() {
  modal.style.display = "none";
  modal2.style.display = "none";
  modal3.style.display = "none";
  modal4.style.display = "none";
  modal5.style.display = "none";
}