第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

使用 getElementsByClassName 打開模式不起作用

使用 getElementsByClassName 打開模式不起作用

繁花不似錦 2022-06-09 10:58:48
我的網(wǎng)站上有一個(gè)模式。我需要在我的所有頁(yè)面中使用該模式。所以我不能在模態(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 回答

?
智慧大石

TA貢獻(xiàn)1946條經(jīng)驗(yàn) 獲得超3個(gè)贊

干得好:


getElementsByClassName行為不同于getElementById. getElementsByClassName:這將返回具有指定類名的元素子元素的集合,作為 NodeList 對(duì)象。


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>


查看完整回答
反對(duì) 回復(fù) 2022-06-09
  • 1 回答
  • 0 關(guān)注
  • 173 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)