javascript - 如何同时打开两个模态窗口

Question

我使用 html、css 和 JavaScript 创建了一个模态（其代码包含在片段中）

它运行良好，虽然它没有同时打开 2 个模态窗口的功能

特别是对于这篇文章，我在原始模式窗口的正文中添加了一个文本，我希望通过该文本打开第二个窗口

如果有人可以编辑代码以使 2 个模态窗口一起打开，那就太好了（比如将一个模态窗口堆叠在另一个之上......而不是谈论一个模态窗口来替换另一个模态窗口，如果我关闭第二个窗口。原始窗口仍然存在在后台活跃）

$(function(){

// Get the button that opens the modal
// read all the control of any type which has class as modal-button
var btn = document.querySelectorAll(".modal-button");

// All page modals
var modals = document.querySelectorAll('.modal');

// Get the <span> element that closes the modal
var spans = document.getElementsByClassName("close");

// When the user clicks the button, open the modal
for (var i = 0; i < btn.length; i++) {
 btn[i].onclick = function(e) {
    e.preventDefault();
    modal = document.querySelector(e.target.getAttribute("href"));
    modal.style.display = "block";
 }
}

// When the user clicks on <span> (x), close the modal
for (var i = 0; i < spans.length; i++) {
 spans[i].onclick = function() {
    for (var index in modals) {
      if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";    
    }
 }
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target.classList.contains('modal')) {
     for (var index in modals) {
      if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";    
     }
    }
}
})

@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');

/* The Modal (background) */
.modal {
    box-sizing: border-box;
    font-family: 'Quicksand', sans-serif;
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 0.1875em; /* 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 {
    color: white;
    position: relative;
    background-color: #171B20;
    margin: auto;
    padding: 0;
    border: 0.0625em solid #888;
    width: 97%;
    box-shadow: 0 0.25em 0.5em 0 rgba(0,0,0,0.2),0 0.375em 1.25em 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: #F0B823;
    float: right;
    font-size: 9vw;
    font-weight: bold;
    position: absolute;
    right: 0.25em;
    top: -0.25em;
}

.close:hover,
.close:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 0.125em 1em;
    background-color: #171B20;
    color: #F0B823;
}

.modal-body {
}

.modal-button {
  font-family: 'Quicksand', sans-serif;
  background-color: #171B20; 
  border: none;
  color: white;
  padding: 0.248em 0.496em;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: 7vw;
  margin: 0.124em 0.062em;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
  width: auto;
}

.modal-button:hover {
  background-color: #171B20;
  color: #F0B823;
}

.pic {
  margin: auto;
  display: block;
  height: auto;
  width: 50vh;
}

.headertext {
  font-family: 'Quicksand', sans-serif;
  display: block;
  text-align: center;
  font-size: 6.50vw;
}

.bodytext {
   font-size: 3.90vw;
   font-family: 'Quicksand', sans-serif;
   display: block;
   padding: 0.625em 0.9375em;                                                                                                       
}

p {
   display: block;
   margin: 0;
} 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Trigger/Open The Modal -->
<a href="#myModal1" class="modal-button">• Click Me</a>

<!-- The Modal -->
<div id="myModal1" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
        <div class="modal-header">
            <span class="close">×</span>
            <div class="headertext">
                <p>Modal Header</p>
            </div>
        </div>
        <div class="modal-body">
            <img class="pic" src="https://drive.google.com/thumbnail?id=108ZLeoIfNkKODfRbLuPWpmXRl0gH9qkD">
            <div class="bodytext">
                <h2 class="modal-button" href="#myModal1">Enable Second Modal Window by tapping on this text</h2>
            </div>
        </div>
    </div>
</div>

标签： javascripthtmlcss

Answer 1

也更改了脚本；）现在开始广泛使用 JQuery bro mV 这将节省您的大量时间和逻辑 :)

$(function(){

// Get the button that opens the modal
// read all the control of any type which has class as modal-button
var btn = document.querySelectorAll(".modal-button");

// All page modals
var modals = document.querySelectorAll('.modal');

// Get the <span> element that closes the modal
var closeBtn = $("span.close");

// When the user clicks the button, open the modal
for (var i = 0; i < btn.length; i++) {
 btn[i].onclick = function(e) {
    e.preventDefault();
    modal = document.querySelector(e.target.getAttribute("href"));
    modal.style.display = "block";
 }
}

// When the user clicks on <span> (x), close the modal
closeBtn.each(function()
{
    var $this = $(this);
    $this.click(function()
    {
        $this.closest(".modal").fadeOut();
    });
});

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target.classList.contains('modal')) {
     for (var index in modals) {
      if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";    
     }
    }
}
})

@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');

/* The Modal (background) */
.modal {
    box-sizing: border-box;
    font-family: 'Quicksand', sans-serif;
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 0.1875em; /* 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 {
    color: white;
    position: relative;
    background-color: #171B20;
    margin: auto;
    padding: 0;
    border: 0.0625em solid #888;
    width: 97%;
    box-shadow: 0 0.25em 0.5em 0 rgba(0,0,0,0.2),0 0.375em 1.25em 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: #F0B823;
    float: right;
    font-size: 9vw;
    font-weight: bold;
    position: absolute;
    right: 0.25em;
    top: -0.25em;
}

.close:hover,
.close:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 0.125em 1em;
    background-color: #171B20;
    color: #F0B823;
}

.modal-body {
}

.modal-button {
  font-family: 'Quicksand', sans-serif;
  background-color: #171B20; 
  border: none;
  color: white;
  padding: 0.248em 0.496em;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: 7vw;
  margin: 0.124em 0.062em;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
  width: auto;
}

.modal-button:hover {
  background-color: #171B20;
  color: #F0B823;
}

.pic {
  margin: auto;
  display: block;
  height: auto;
  width: 50vh;
}

.headertext {
  font-family: 'Quicksand', sans-serif;
  display: block;
  text-align: center;
  font-size: 6.50vw;
}

.bodytext {
   font-size: 3.90vw;
   font-family: 'Quicksand', sans-serif;
   display: block;
   padding: 0.625em 0.9375em;                                                                                                       
}

p {
   display: block;
   margin: 0;
} 

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Trigger/Open The Modal -->
<a href="#myModal1" class="modal-button">• Click Me</a>

<!-- The Modal -->
<div id="myModal1" class="modal">

<!-- Modal content -->
<div class="modal-content">
    <div class="modal-header">
        <span class="close">×</span>
        <div class="headertext">
            <p>Modal Header</p>
        </div>
    </div>
    <div class="modal-body">
        <img class="pic" src="https://drive.google.com/thumbnail?id=108ZLeoIfNkKODfRbLuPWpmXRl0gH9qkD">
        <div class="bodytext">
            <h2 class="modal-button" href="#myModal2">Enable Second Modal Window by tapping on this text</h2>
        </div>
    </div>
</div>
</div>

<div id="myModal2" class="modal">

<!-- Modal content -->
<div class="modal-content">
    <div class="modal-header">
        <span class="close">×</span>
        <div class="headertext">
            <p>Modal Header 2</p>
        </div>
    </div>
    <div class="modal-body">
        <div class="bodytext">
            My second Modal :D !!
        </div>
    </div>
</div>
</div>