我的網(wǎng)站中有一個模式。我需要在我的所有頁面中使用該模式。所以我不能在模態(tài)腳本中使用 ID。這是我的js代碼var modal = document.getElementById('demo-modal');var btn = document.getElementById('open-modal');var close = modal.getElementsByClassName('close')[0];btn.onclick = function() { modal.style.display = 'block';};close.onclick = function() { modal.style.display = 'none';};window.onclick = function(event) { if (event.target == modal) { modal.style.display = 'none'; }};然后我將上面的 getElementById 更改為 getElementsByClassName ，并且我的 html 將 ID 更改為類，但它根本不起作用。var modal = document.getElementsByClassName('demo-modal');var btn = document.getElementsByClassName('open-modal');var close = modal.getElementsByClassName('close')[0];這是小提琴。有任何想法嗎？
1 回答
慕哥9229398
TA貢獻(xiàn)1877條經(jīng)驗 獲得超6個贊
干得好：
getElementsByClassName行為不同于getElementById.?getElementsByClassName：這將返回具有指定類名的元素的子元素的集合，作為 NodeList 對象。
var modal = document.getElementsByClassName('modal')[0];
var btn = document.getElementsByClassName('open-modal')[0];
var close = modal.getElementsByClassName('close')[0];
btn.onclick = function() {
? modal.style.display = 'block';
};
close.onclick = function() {
? modal.style.display = 'none';
};
window.onclick = function(event) {
? if (event.target == modal) {
? ? modal.style.display = 'none';
? }
};
.modal {
? display: none;
? position: fixed;
? top: 0;
? right: 0;
? bottom: 0;
? left: 0;
? overflow: auto;
? background: rgba(0, 0, 0, 0.8);
? z-index: 99999;
? animation-name: show;
? animation-duration: 0.5s
}
.modal-content {
? position: relative;
? background-color: #fff;
? margin: 10% auto;
? border: 1px solid #888;
? width: 80%;
? box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
@keyframes show {
? 0% {
? ? display: none;
? ? opacity: 0;
? }
? 100% {
? ? display: block;
? ? opacity: 1;
? }
}
.modal-header {
? padding: 12px;
? background-color: grey;
? color: white;
}
.modal-body {
? padding: 12px;
}
.modal-footer {
? position: relative;
? background-color: #fefefe;
? margin: auto;
? padding: 12px;
}
.close {
? color: #aaa;
? float: right;
? font-size: 16px;
}
.close:hover,
.close:focus {
? color: black;
? cursor: pointer;
}
<button class="open-modal" name="open-modal-btn">Open Modal</button>
<div class="modal demo-modal">
? <div class="modal-content">
? ? <div class="modal-header">
? ? ? <span class='close'>X</span>
? ? ? <h2>Modal Header</h2>
? ? </div>
? ? <div class="modal-body">
? ? ? <p>Some text in the Modal Body</p>
? ? ? <p>Some other text...</p>
? ? </div>
? ? <div class="modal-footer">
? ? ? <h3>Modal Footer</h3>
? ? </div>
? </div>
</div>
- 1 回答
- 0 關(guān)注
- 123 瀏覽
添加回答
舉報
0/150
提交
取消