javascript - 打开另一个模式时如何关闭一个模式？

Question

我在我的网站上创建了一些模式。我想做的是:

当我点击一个模态框时，无法点击另一个模态框(现在它会打开我点击的所有模态框)

我希望能够在单击另一个模态并打开新模态时关闭打开的模态。

我还希望当我点击页面上的某处时，模式关闭。

这是我的代码:

HTML

<div class="experience-list exper1">
   <img src="img/mockup.png" class="exp-image" />
   <button class="overlay" id="myBtn" data-modal="myModal">
      <div class="exper-details">
         <div class="exper-title">PureCode</div>
         <div class="exper-info">Front-End Development</div>
      </div>
   </button>
   <div id="myModal" class="modal">
      <div class="modal-content">
         <div class="modal-info">
            <div class="modal-details">
            </div>
         </div>
         <span class="close">&times;</span>
      </div>
   </div>
</div>
<div class="experience-list exper2">
<img src="" class="exp-image" />
<button class="overlay" id="myBtn2" data-modal="myModal2">
   <div class="exper-details">
   </div>
</button>
<div id="myModal2" class="modal">
   <div class="modal-content">
      <div class="modal-info">
         <div class="modal-details">
         </div>
         <span class="close">&times;</span>
      </div>
   </div>
</div>
<div class="experience-list exper3">
   <img src="" class="exp-image" />
   <button class="overlay" id="myBtn3" data-modal="myModal3">
      <div class="exper-details">
      </div>
   </button>
   <div id="myModal3" class="modal">
      <div class="modal-content">
         <div class="modal-info">
            <div class="modal-details">
            </div>
         </div>
         <span class="close">&times;</span>
      </div>
   </div>
</div>

CSS

/* EXPERIENCE SECTION */

section.experience {
    background: url('img/background.png') no-repeat fixed;
    padding-top: 100px;

}

.experience-content {
    margin-top: 60px;

}

.experience-container .section-title {
    color: #fff;
    padding-bottom:100px;
    margin-left: 15%;
}




/*.experience-box {
    border: 1px solid;
    padding: 10px;
    max-width: 80%;
    margin: 20px;


}*/


.exper1, .exper2, .exper3, .exper4, .exper5 {
    min-height: 283px;
    max-height:283px;

}


.experience-box h4 {
    line-height:2px;
}


.experience-box h4 span {
    color:pink;
    font-size:20px;
}


.experience-list {
    position: relative;
    width: 30%;
    height: 283px;
    float:left;
    background-color: white;
    margin-right:35px;
    margin-bottom:80px;
    box-shadow: 0 20px 80px 0 rgba(0,0,0,.45);
}

.experience-list:last-child{
    margin-right:0px;
}

.experience-list:last-child {
    margin-right:0px;
}


.exp-image {
    display:block;
    width: 100%;
    height:320px;
}

.overlay {
    position:absolute;
    top:0;
    bottom: 0;
    left:0;
    right:0;
    height:320px;
    width:100%;
    opacity:0;
    transition:.5s ease;
    background-color:#fff;
    cursor:pointer;
}

.experience-list:hover .overlay {
    opacity:1;
}

.exper-details {
    cursor:pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%, -50%);
    text-align: center;
}


.exper-title {
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 35px;
    color: #252C3C;
    font-weight: 400;
}

.exper-info {
    font-size: 22px;
    color:pink;
}

/* MODAL */

.modal {
    display:none;
    position:fixed;
    z-index: 1;
    /*padding-top: 100px;*/
    margin-top:100px;
    left:22%;
    top:0;
    width:1000px;
    height: 750px;
    /*overflow:auto;*/
    /*background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);*/
}

.modal-content {
    background-color: #fff;
    color: #252C3C;
    margin: auto;
    padding: 0;
    /*border: 1px solid #888;*/
    width: 80%;
    height: 720px;
}


.modal-info {
    border-top: 3px solid #252C3C;
    margin-left: 20px;
    margin-right:20px;

}
.modal-info h1 {
    font-weight: 400;
}

.modal-info h4 {
    font-size: 20px;

}

.modal-details {
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
.modal-info p {
    font-size: 18px;
}
.modal-info a {
    padding: 11px 30px;
    margin-top:10px;
    font-size: 15px;
    transition: all .5s;
    cursor: pointer;
    background: #E31B6D;
    color: #fff;
    font-weight: 600;
    border: 0;
}

.close {
    color: #252C3C;
    float:right;
    font-size: 45px;
    font-weight: bold;
    position:fixed;
    left:68%;
    top:82%;
}


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

JavaScript

<script>
    var modalBtns = [...document.querySelectorAll(".overlay")];
    modalBtns.forEach(function(btn) {
        btn.onclick = function() {
            var modal = btn.getAttribute('data-modal');

            document.getElementById(modal).style.display = "block";
        }
    });

    var closeBtns = [...document.querySelectorAll(".close")];
    closeBtns.forEach(function(btn) {
        btn.onclick = function() {
            var modal = btn.closest('.modal');
            modal.style.display = "none";
        }
    });

    window.onclick = function(event) {
        if (event.target.className === "modal") {
            event.target.style.display = "none";
        }
    }
</script>

Answer 1

你可以用 css 做到这一点:

.modal {
    display:none;
    position:fixed;
    z-index: 1;
    margin:0;
    left:0;
    top:0;
    width:100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.4);
}

这样，您的模态框后面就有一个覆盖层，占据了整个视口(viewport)。

这是一支笔:

https://codepen.io/anon/pen/BOKwdV?editors=0110