純 Javascript 彈出/模式離開網站同意

Question

我嘗試創建簡單的彈出窗口，離開網站同意。

演示：請參閱 codepen 上的演示

function exModal() {
  const modalhtml=` <div class="modal-header">
  &#128279; You're Leaving Our Site!
   <span class="close-modal">&times</span>
   </div> 
   <div class="modal-body">
   This is a link to an external site. Click OK to continue to the content. Feel free to comeback again. Make Sure To Follow Instructions Properly.
   <br/><br/>
   <div class="show-link"></div>
   </div> 
   <div class="modal-footer">
   <button class="close-modal">Close</button>
   <button class="confirm-modal">OK</> 
   </div> `;

  const getlink = document.querySelector('.ex-link').getAttribute('data-href');
  const extra=document.createElement('div');
  extra.classList.add('modal-content');
  extra.innerHTML=modalhtml;
  document.body.appendChild(extra);
  document.querySelector('.show-link').innerHTML='('+getlink+')';
  const close=document.querySelectorAll('.close-modal');
  document.querySelector('.confirm-modal').addEventListener('click', (e) => {
    window.open(getlink, '_blank');
  });
  let i;
    for (i = 0; i < close.length; i++) {
        close[i].addEventListener('click', (e) => {
        extra.remove();
    });
  }
}

問題

1. 當模式打開時，如何防止單擊紫色按鈕。
2. 我還想添加 function 就像當有人點擊確定按鈕時，它會在其他選項卡中打開鏈接時關閉模態。
3. 我可以用一個事件偵聽器處理兩個事件嗎？ （參考（2）問題）那又如何呢？

一個好的參考將完成這項工作。 我試過谷歌搜索，但大部分教程包括 jquery 或其他腳本

Answer 1

這是我所做的：

1. 我換了

<a class="ex-link" data-href="https://www.techlegionbd.com" onclick="exModal()">Tech Legion BD</a>

和

<button class="ex-link" type="submit">Tech Legion BD</button>

2. 在 CSS 我更換了

a.ex-link {
...
}

和

button.ex-link {

3. 最后，我使用了一種函數式方法來重寫腳本：

CSS

 button.ex-link {
 width: 150px;
 display: block;
 margin: 10px auto;
 padding: 20px;
 border: 1px solid white;
 background-color: #6600d6;
 color: white;
 font-family: 'Martel Sans', sans-serif;
 font-weight: 800;
 text-align: center
}

.modal-content {
 position: fixed;
 top: 30%;
 left: 50%;
 margin-left: -190px;
 max-width: 380px;
 border: 2px dotted #008080;

}

.modal-header {
 font-size: 20px;
 padding: 15px;
 border-bottom: 1px solid #cecece;
 background: #edfdfe;
}

.modal-body {
 padding: 20px;
 text-align: center;
 border-bottom: 1px solid #cecece;
}

.modal-footer {
 padding: 10px;
 background: #edfdfe;
}

.modal-footer>button {
 padding: 6px 10px;
 margin-left: 5px;
 cursor: pointer;
 width: 50px;
 background: #75e4d5;
 border: 1px solid #008080;
 border-radius: 4px;
}

.modal-header>.close-modal {
 position: absolute;
 right: 0;
 top: 0;
 padding: 15px;
 cursor: pointer;
}

HTML

<!-- <a class="ex-link" data-href="https://www.techlegionbd.com" onclick="exModal()">Tech Legion BD</a>-->
<button class="ex-link" type="submit">Tech Legion BD</button>

JAVASCRIPT

const openModalButton = document.querySelector("button");
const extra = document.createElement('div');
const getlink = "https://www.techlegionbd.com";

const modalhtml = ` <div class="modal-header">
 &#128279; You're Leaving Our Site!
<!-- <span class="close-modal">&times</span>-->
</div>
 <span class="close-modal" onclick="closeModal()">&times</span>
</div>
<div class="modal-body">
 This is a link to an external site. Click OK to continue to the content. Feel free to comeback again. Make Sure To Follow Instructions Properly.
 <br /><br />
 <div class="show-link"></div>
</div>
<div class="modal-footer">
 <!--<button class="close-modal">Close</button>-->
 <button class="close-modal" onclick="closeModal()">Close</button>


 <button class="confirm-modal">OK</>
</div> `;


function openModal() {
 //refewnce variables 
 extra.classList.add('modal-content');
 extra.innerHTML = modalhtml;
 document.body.appendChild(extra);
 document.querySelector('.confirm-modal').addEventListener('click', (e) => {
  window.open(getlink, '_blank');
 });

}
openModalButton.addEventListener("click", () => { openModal() })



function closeModal() {
 document.body.removeChild(extra);
}