莫代尔'关闭'不工作

Question

我已经采取了一个工作脚本，并将其调整为允许多个独立模态，并且我不再能够关闭任何模态。我收到错误：

Cannot set property 'display' of undefined at HTMLSpanElement.span.onclick

window.onclick或document.onclick函数都不起作用。 Here's the jsfiddle

<div class="contentSection"> 
    <a class="popupBtn" data-modal="modal-window-one">Open Me!</a> 
</div> 

<div id="modal-window-one" class="popupModal modal"> 
    <span class="close">&times;</span> 
    <div class="modalContent"> 
     <p>Here's some content!</p> 
    </div> 
</div> 

<div class="contentSection"> 
    <a class="popupBtn" data-modal="modal-window-two">...Or Open Me!</a> 
</div> 

<div id="modal-window-two" class="popupModal modal"> 
    <span class="close">&times;</span> 
    <div class="modalContent"> 
     <p>Here's some different content!</p> 
    </div> 
</div> 


var modal = document.getElementsByClassName('popupModal'); 
var btn = document.getElementsByClassName("popupBtn"); 
var span = document.getElementsByClassName("close")[0]; 

for (var i = 0; i < btn.length; i++) { 
    var thisBtn = btn[i]; 
    thisBtn.addEventListener("click", function(){ 
     var modal = document.getElementById(this.dataset.modal); 
     modal.style.display = "block"; 
    }, false); 
} 

span.onclick = function() { 
    modal.style.display = "none"; 
} 

window.onclick = function(event) { 
    if (event.target == modal) { 
     modal.style.display = "none"; 
    } 
} 

Answer 1

modal是HTMLCollection（阵列状物体），您有popupModal类多于一个的元件。 因此，您需要遍历数组并为所有设置display = none。

此外，您分配click仅前close元素，所以你需要通过span元素进行迭代并附加click两个span元素关闭这两个模态窗口。

或者，如果event.target为span，则只需遍历modal阵列并附加事件侦听器即可关闭模态。

var modal = document.getElementsByClassName('popupModal'); 
 
var btn = document.getElementsByClassName("popupBtn"); 
 
var span = document.getElementsByClassName("close"); 
 

 
for (var i = 0; i < btn.length; i++) { 
 
    var thisBtn = btn[i]; 
 
    thisBtn.addEventListener("click", function() { 
 
    var modal = document.getElementById(this.dataset.modal); 
 
    modal.style.display = "block"; 
 
    }, false); 
 
} 
 

 

 
for (var i = 0; i < modal.length; i++) { 
 
    modal[i].addEventListener("click", function(e) { 
 
    if(e.target.className === 'close') { 
 
     this.style.display = 'none'; 
 
    } 
 
    }, false); 
 
}

.popupBtn { 
 
    cursor: pointer; 
 
} 
 

 
.modal { 
 
    display: none; 
 
    position: fixed; 
 
    z-index: 1; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: rgb(0, 0, 0); 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
    cursor: pointer; 
 
} 
 

 
.modalContent { 
 
    background-color: #fefefe; 
 
    margin: 15% auto; 
 
    padding: 20px; 
 
    border-top: 8px solid #81c8e8; 
 
    border-radius: 4px; 
 
    width: 50%; 
 
    box-shadow: 0px 2px 8px #222; 
 
    cursor: default; 
 
    font-size: .9em; 
 
} 
 

 
.close { 
 
    color: #ccc; 
 
    float: right; 
 
    font-size: 25pt; 
 
    font-weight: bold; 
 
    transition: ease-in-out .5s; 
 
    padding: 10px 30px; 
 
    background-color: #2b3d52; 
 
} 
 

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

<div class="contentSection"> 
 
    <a class="popupBtn" data-modal="modal-window-one">Open Me!</a> 
 
</div> 
 

 
<div id="modal-window-one" class="popupModal modal"> 
 
    <span class="close">&times;</span> 
 
    <div class="modalContent"> 
 
    <p> 
 
     Here's some content! 
 
    </p> 
 
    </div> 
 
</div> 
 

 
<div class="contentSection"> 
 
    <a class="popupBtn" data-modal="modal-window-two">...Or Open Me!</a> 
 
</div> 
 

 
<div id="modal-window-two" class="popupModal modal"> 
 
    <span class="close">&times;</span> 
 
    <div class="modalContent"> 
 
    <p> 
 
     Here's some different content! 
 
    </p> 
 
    </div> 
 
</div>

Answer 2

，我看到一对夫妇的事情，不就在你的代码：

1）你使用两次var modal

2）您订阅的唯一onclick一个<span></span>

3）var model = document.getElementsByClassName('popupModal'); will actual LY返回HTMLCollection和验证码：

window.onclick = function(event) { 
    if (event.target == modal) { 
    modal.style.display = "none"; 
    } 
} 

行不通（你需要考虑重构它）

所以，你需要抓住这两个范围的click，它应该工作

var modals = document.getElementsByClassName('popupModal'); 
 
var btns = document.getElementsByClassName("popupBtn"); 
 
var spans = document.getElementsByClassName("close"); 
 

 
for (var i = 0; i < btns.length; i++) { 
 
    var thisBtn = btns[i]; 
 
    thisBtn.addEventListener("click", function() { 
 
    var m = document.getElementById(this.dataset.modal); 
 
    m.style.display = "block"; 
 
    }, false); 
 
} 
 

 
for (var i = 0; i < spans.length; i++) { 
 
    var thisSpan = spans[i]; 
 
    thisSpan.addEventListener("click", function() { 
 
    \t this.parentNode.style.display = "none"; 
 
    }, false); 
 
}

.popupBtn { 
 
    cursor: pointer; 
 
} 
 

 
.modal { 
 
    display: none; 
 
    position: fixed; 
 
    z-index: 1; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: rgb(0, 0, 0); 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
    cursor: pointer; 
 
} 
 

 
.modalContent { 
 
    background-color: #fefefe; 
 
    margin: 15% auto; 
 
    padding: 20px; 
 
    border-top: 8px solid #81c8e8; 
 
    border-radius: 4px; 
 
    width: 50%; 
 
    box-shadow: 0px 2px 8px #222; 
 
    cursor: default; 
 
    font-size: .9em; 
 
} 
 

 
.close { 
 
    color: #ccc; 
 
    float: right; 
 
    font-size: 25pt; 
 
    font-weight: bold; 
 
    transition: ease-in-out .5s; 
 
    padding: 10px 30px; 
 
    background-color: #2b3d52; 
 
} 
 

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

<div class="contentSection"> 
 
    <a class="popupBtn" data-modal="modal-window-one">Open Me!</a> 
 
</div> 
 

 
<div id="modal-window-one" class="popupModal modal"> 
 
    <span class="close">&times;</span> 
 
    <div class="modalContent"> 
 
    <p> 
 
     Here's some content! 
 
    </p> 
 
    </div> 
 
</div> 
 

 
<div class="contentSection"> 
 
    <a class="popupBtn" data-modal="modal-window-two">...Or Open Me!</a> 
 
</div> 
 

 
<div id="modal-window-two" class="popupModal modal"> 
 
    <span class="close">&times;</span> 
 
    <div class="modalContent"> 
 
    <p> 
 
     Here's some different content! 
 
    </p> 
 
    </div> 
 
</div>