我有一個模態，當用戶單擊“從這里開始”按鈕時打開，在第一個模態上單擊下一步后，它會自動轉到下三個模態，然后使用表單轉到最后一個模態。我有兩個“關閉”點擊，一個在第一個模態上，另一個在最后一個模態上。問題是模態在第一個而不是最后一個上關閉。我也需要它關閉最后一個。
我的代碼在這里：
// 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">×</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 >
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">×</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>uj5u.com熱心網友回復：
通過在腳本標簽中應用下面的代碼并洗掉該行來嘗試下面的代碼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";
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/495470.html
標籤：javascript
下一篇：將熊貓資料框乘以字典