通過點擊螢屏上的任何地方關閉模態，而不僅僅是按鈕

我有一段代碼，可以通過點擊一個按鈕來打開一個模態，并通過點擊同一個按鈕來再次關閉它。我希望能夠通過點擊螢屏上的任何地方來關閉模態，而不僅僅是這個按鈕。

我在網上找到了很多關于如何做到這一點的代碼，但由于我是 JavaScript 的初學者，所以我很難將新的代碼片斷納入自己的代碼中并使其發揮作用。誰能幫我解決這個問題，并解釋我如何以及在我現有的代碼中需要添加/更改的行？

這里有一個鏈接，可以看到模態現在是如何作業的（螢屏右上方的按鈕）。 https://carbonrollercoaster.bsqd.me/

JavaScript

const bf = document. querySelector('#botsquad-frame') 。

let el = document.createElement('div') 。

el.setAttribute('id', 'mijnKnopje') 。

const inhoud = `.
<div class="info-content">
  <p1>INFORMATIE: <br>            
通過參與此聊天，您接受您的一些答案將顯示在安裝的某個螢屏上。
<br><br>
如何操作：<br>
與Nostos和Algia對話，向他們提問并討論多個話題。
</div>
<div class="info-section">
  <a role="button" class="knopje info-button" style="background-color:mediumpurple" >
    <div class="info-label">!</div>
  </a>
</div>
`;

el.innerHTML = inhoud;

bf.appendChild( el )。

const mijnKnopje = document.querySelector(' .knopje')。
const mijnInfo = document.querySelector('.info-content') 。

mijnKnopje.addEventListener('click', （）=> {
  //mijnInfo.style.display = 'block'; {
  //mijnKnopje.style.backgroundColor = 'fuchsia'; 
  mijnKnopje.classList.toggle( 'active' ) 。
  mijnInfo.classList.toggle( 'active' )。
  
  let inputField = document.querySelector（'.chat-input'）。
  if ( mijnInfo.classList.contains( 'active' ) ) {
    inputField.style.display = 'none';
  } else {
    inputField.style.display = 'revert';
  }
} );

uj5u.com熱心網友回復：

你可以為整個div-info-content又名const mijnInfo添加一個事件監聽器，并在點擊時洗掉active類：

const mijnInfo = document. querySelector('.info-content') 。

mijnInfo.addEventListener('click', () =>  {
  mijnKnopje.classList.remove( 'active' ) 。
  mijnInfo.classList.remove( 'active' ) 。
  document.querySelector(' 。 chat-input').style.display = 'revert';
});

uj5u.com熱心網友回復：

嘗試使用event delegation.

這里有一個最小的可復制的例子，可以使用。

document.addEventListener（`click`/span>, handle）。

function createOrDestroyPopupDummy（create） {
  const inhoud = `.
    <div id="popup">
      <h3> INFORMATIE</h3>            
      <div>
        當您在聊天中遇到問題時，您可以通過以下方式來解決。
        的問題。
      </div>
      <h3>如何做</h3>            
      指南
        請聯系Nostos和Algia，與他們討論所有的問題。
        的問題。
      </div>
      <div>
        <button id="closeInfo">Gezien!</div>
      </div>
    </div>`。
   const popupOpen = document.querySelector(`#popup`) 。
   const createBox = (/span>) => document. body.insertAdjacentHTML(`beforeend`, inhoud) 。
   const destroyBox = () => popupOpen && popupOpen.remove()。
   return create ? createBox() : destroyBox();
}

function handle（evt） {
    //顯示'popup'。
    if (evt.target.id == "info") {
      return createOrDestroyPopupDummy（true）。
    }
    
    //如果在盒子里并且沒有點擊按鈕#closeInfo，則不做任何事情。
    if (evt.target.id !== `closeInfo` & & evt. target.closest(`#popup`) ) {
      return;
    }
    
    //否則銷毀'popup'。
    return createOrDestroyPopupDummy()。
}

#closeInfo {margin-top: 0.5rem; }
#popup {
  border: 2px solid green;
  box-shadow: 2px 2px 8px #999;
  width: 75vw;
  padding: 0.4rem;
  position: absolute;
  top: 50%; right: 50%;
  transform: translate(50%,-50%) 。
}
#popup h3 {
  margin-top: 0.2rem;
  margin-bottom: 0.1rem;
}

< button id="info">Info</button> 

標籤：

上一篇：Jquery查找一個td的輸入型別（需要支持文本、日期、數字和選擇）。

下一篇：在C 20中使用std::views將std::vector<string>轉換為僅僅是一個std::string。