纯Javascript弹出/模态离开网站同意

Question

我尝试创建简单的弹出窗口离开网站同意。

演示：See demo on 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. 我还想添加一些功能，比如当有人单击确定按钮时，它会在其他选项卡中打开链接时关闭模式。
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>

1. 在我替换的 CSS 中

a.ex-link {
...
}

与

button.ex-link {

1. 最后我使用了函数式方法来重写脚本：

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);
}