纯JavaScript站外跳转确认弹窗实现相关问题咨询

问题1：弹窗打开时禁止页面紫色按钮被点击 #

有两种实现方案按需选择：

• 方案1：直接禁用目标按钮
  弹窗渲染完成后，选中紫色按钮（将下方.purple-btn替换为你实际的按钮类名/id选择器），设置disabled属性：

  // 加在document.body.appendChild(extra);之后
  const purpleBtn = document.querySelector('.purple-btn');
  purpleBtn.disabled = true;
  

  弹窗关闭时记得恢复按钮状态，在关闭弹窗的逻辑中补充：

  purpleBtn.disabled = false;
  

• 方案2（更通用推荐）：添加全屏半透明遮罩层，拦截所有背景区域点击
  不需要单独控制单个按钮，弹窗出现时背景所有元素都不可点击，同时能突出弹窗层级：

  // 创建遮罩层，可将样式提前写入CSS文件
  const mask = document.createElement('div');
  mask.classList.add('modal-mask');
  Object.assign(mask.style, {
    position: 'fixed',
    top: 0,
    left: 0,
    width: '100vw',
    height: '100vh',
    background: 'rgba(0,0,0,0.5)',
    zIndex: 999
  });
  // 把弹窗内容挂载到遮罩层，再将遮罩层插入body
  mask.appendChild(extra);
  document.body.appendChild(mask);
  // 弹窗关闭时直接移除整个遮罩层即可
  

  同时给你的modal-content弹窗容器设置高于999的z-index，确保弹窗在遮罩上层可正常交互。

问题2+3：点击确认按钮同时打开链接+关闭弹窗，是否可通过单个监听器实现 #

完全可以，你只需要在现有确认按钮的点击事件回调里，把打开链接和移除弹窗的逻辑写在一起即可，不需要额外新增事件监听器。
修改后的确认按钮监听代码如下：

document.querySelector('.confirm-modal').addEventListener('click', (e) => {
  window.open(getlink, '_blank');
  // 没用遮罩就移除弹窗元素extra，用了遮罩就移除mask
  // extra.remove();
  mask.remove();
});

修复后的完整可运行代码 #

function exModal() {
  const modalhtml=` <div class="modal-header">
  🔗 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</button>
   </div> `;

  const getlink = document.querySelector('.ex-link').getAttribute('data-href');
  // 新增遮罩层
  const mask = document.createElement('div');
  mask.classList.add('modal-mask');
  Object.assign(mask.style, {
    position: 'fixed',
    inset: 0,
    background: 'rgba(0,0,0,0.5)',
    zIndex: 999
  });

  const extra=document.createElement('div');
  extra.classList.add('modal-content');
  // 弹窗基础样式，可提前写入CSS
  Object.assign(extra.style, {
    position: 'fixed',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%,-50%)',
    zIndex: 1000,
    background: '#fff',
    padding: '20px',
    borderRadius: '8px',
    minWidth: '300px'
  });
  extra.innerHTML=modalhtml;
  mask.appendChild(extra);
  document.body.appendChild(mask);
  document.querySelector('.show-link').innerHTML='('+getlink+')';

  // 禁用紫色按钮，替换为实际的按钮选择器
  const purpleBtn = document.querySelector('.purple-btn');
  if(purpleBtn) purpleBtn.disabled = true;

  const close=document.querySelectorAll('.close-modal');
  // 单个事件监听器同时处理跳转+关闭弹窗
  document.querySelector('.confirm-modal').addEventListener('click', (e) => {
    window.open(getlink, '_blank');
    mask.remove();
    if(purpleBtn) purpleBtn.disabled = false;
  });
  // 关闭按钮逻辑
  for (let i = 0; i < close.length; i++) {
    close[i].addEventListener('click', (e) => {
      mask.remove();
      if(purpleBtn) purpleBtn.disabled = false;
    });
  }
}

内容的提问来源于stack exchange，提问作者Sohan Razzak