莫代爾'關閉'不工作

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>