js 实现popup

使用 JavaScript 实现弹出窗口

通过 window.open 方法实现基础弹窗
语法如下：

window.open(url, name, specs, replace);

示例代码：

const popup = window.open('https://example.com', 'PopupWindow', 'width=400,height=300');

参数说明：

• url：弹窗加载的页面地址（可选）。
• name：弹窗名称（用于 target 属性）。
• specs：定义弹窗尺寸和特性（如 width=500,height=400）。
• replace：是否替换浏览器历史记录（布尔值）。

通过 HTML 和 JavaScript 实现自定义弹窗
HTML 结构：

<div id="customPopup" class="popup">
  <div class="popup-content">
    <span class="close-btn">&times;</span>
    <p>这是自定义弹窗内容</p>
  </div>
</div>

CSS 样式：

.popup {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
}
.popup-content {
  background: white;
  margin: 15% auto;
  padding: 20px;
  width: 50%;
}
.close-btn {
  float: right;
  cursor: pointer;
}

JavaScript 控制逻辑：

const popup = document.getElementById('customPopup');
const closeBtn = document.querySelector('.close-btn');

// 打开弹窗
function openPopup() {
  popup.style.display = 'block';
}

// 关闭弹窗
closeBtn.addEventListener('click', () => {
  popup.style.display = 'none';
});

// 点击外部关闭
window.addEventListener('click', (e) => {
  if (e.target === popup) {
    popup.style.display = 'none';
  }
});

使用第三方库（如 SweetAlert）
安装 SweetAlert2：

npm install sweetalert2

示例代码：

import Swal from 'sweetalert2';

Swal.fire({
  title: '弹窗标题',
  text: '这是一个更美观的弹窗',
  icon: 'success',
  confirmButtonText: '确定'
});

特性：

• 支持图标、按钮自定义和异步操作。
• 响应式设计，兼容移动端。

注意事项

• 浏览器可能拦截 window.open 触发的弹窗，需确保在用户交互事件（如点击）中调用。
• 自定义弹窗需处理无障碍访问（ARIA 属性）。
• 移动端优先考虑全屏或模态对话框体验。