如何实现点击按钮后在窗口内打开页面并添加遮罩锁定效果

1. HTML结构 #

搭建基础DOM结构，包含触发按钮、可移动窗口容器、遮罩层和内嵌页面容器：

<!-- 触发按钮 -->
<button id="openBtn">打开内嵌页面</button>

<!-- 可移动的窗口容器 -->
<div id="targetWindow" class="window-container">
  <!-- 遮罩层，初始隐藏 -->
  <div id="maskLayer" class="mask-layer"></div>
  <!-- 内嵌页面容器 -->
  <iframe id="innerPage" class="inner-page" src="" frameborder="0"></iframe>
</div>

2. CSS样式 #

设置窗口可拖拽属性、遮罩暗化效果，以及元素禁用状态的样式：

/* 窗口容器：绝对定位，可拖拽，初始隐藏 */
.window-container {
  position: absolute;
  width: 600px;
  height: 400px;
  border: 1px solid #ccc;
  background: #fff;
  display: none;
  cursor: move;
  overflow: hidden;
}

/* 遮罩层：全屏覆盖窗口，半透明黑色，初始隐藏 */
.mask-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 10;
}

/* 内嵌页面：占满窗口 */
.inner-page {
  width: 100%;
  height: 100%;
}

/* 元素禁用状态：透明度降低，阻止交互 */
.disabled {
  opacity: 0.6;
  pointer-events: none;
  cursor: not-allowed;
}

3. JavaScript逻辑 #

实现按钮触发、窗口拖拽同步、遮罩点击禁用元素的功能：

const openBtn = document.getElementById('openBtn');
const targetWindow = document.getElementById('targetWindow');
const maskLayer = document.getElementById('maskLayer');
const innerPage = document.getElementById('innerPage');

// 点击按钮打开窗口并加载指定页面
openBtn.addEventListener('click', () => {
  targetWindow.style.display = 'block';
  // 替换为你需要加载的页面地址
  innerPage.src = 'https://example.com';
});

// 实现窗口拖拽，内嵌页面会自动跟随容器移动
let isDragging = false;
let startX, startY, initialX, initialY;

targetWindow.addEventListener('mousedown', (e) => {
  isDragging = true;
  startX = e.clientX;
  startY = e.clientY;
  initialX = targetWindow.offsetLeft;
  initialY = targetWindow.offsetTop;
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  const dx = e.clientX - startX;
  const dy = e.clientY - startY;
  targetWindow.style.left = `${initialX + dx}px`;
  targetWindow.style.top = `${initialY + dy}px`;
});

document.addEventListener('mouseup', () => {
  isDragging = false;
});

// 点击遮罩层，暗化窗口并禁用所有内部元素
maskLayer.addEventListener('click', () => {
  maskLayer.style.display = 'block';
  const allElements = targetWindow.querySelectorAll('*');
  allElements.forEach(el => el.classList.add('disabled'));
});

核心逻辑说明 #

• 窗口拖拽：通过监听鼠标按下、移动、松开事件，计算窗口偏移量并修改定位属性，内嵌iframe会自动跟随容器同步移动。
• 背景暗化：遮罩层使用半透明黑色背景，覆盖整个窗口区域，点击后保持显示状态。
• 元素禁用：通过添加disabled类，利用pointer-events: none阻止元素交互，同时修改透明度和鼠标样式提示用户。

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