js 实现popup

实现基本的 JavaScript Popup

使用 window.open() 方法创建最简单的弹窗：

const popup = window.open('', 'PopupWindow', 'width=300,height=200');
popup.document.write('<h1>Hello Popup!</h1>');

自定义弹窗样式

通过 DOM 操作创建带样式的弹窗：

const popup = document.createElement('div');
popup.style.position = 'fixed';
popup.style.top = '50%';
popup.style.left = '50%';
popup.style.transform = 'translate(-50%, -50%)';
popup.style.padding = '20px';
popup.style.backgroundColor = 'white';
popup.style.boxShadow = '0 0 10px rgba(0,0,0,0.3)';
popup.innerHTML = '<button id="closeBtn">X</button><p>Custom Popup Content</p>';
document.body.appendChild(popup);

document.getElementById('closeBtn').addEventListener('click', () => {
  document.body.removeChild(popup);
});

带遮罩层的弹窗

实现背景遮罩效果：

const overlay = document.createElement('div');
overlay.style.position = 'fixed';
overlay.style.top = '0';
overlay.style.left = '0';
overlay.style.width = '100%';
overlay.style.height = '100%';
overlay.style.backgroundColor = 'rgba(0,0,0,0.5)';
overlay.style.zIndex = '1000';

const popup = document.createElement('div');
popup.style.position = 'fixed';
popup.style.top = '50%';
popup.style.left = '50%';
popup.style.transform = 'translate(-50%, -50%)';
popup.style.zIndex = '1001';
popup.innerHTML = '<div style="background:white;padding:20px;">Popup Content</div>';

document.body.appendChild(overlay);
document.body.appendChild(popup);

overlay.addEventListener('click', () => {
  document.body.removeChild(overlay);
  document.body.removeChild(popup);
});

使用 CSS 动画的弹窗

添加弹出动画效果：

.popup {
  animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -40%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

const popup = document.createElement('div');
popup.className = 'popup';
popup.style.position = 'fixed';
popup.style.top = '50%';
popup.style.left = '50%';
popup.style.transform = 'translate(-50%, -50%)';
popup.innerHTML = 'Animated Popup';
document.body.appendChild(popup);

响应式弹窗

根据屏幕尺寸调整弹窗大小：

function createResponsivePopup() {
  const width = window.innerWidth > 768 ? '50%' : '90%';

  const popup = document.createElement('div');
  popup.style.width = width;
  popup.style.maxWidth = '600px';
  popup.style.margin = '0 auto';
  popup.innerHTML = 'Responsive Popup Content';

  document.body.appendChild(popup);
}

使用第三方库

使用 jQuery UI 实现弹窗：

$('<div>').dialog({
  title: 'jQuery UI Popup',
  width: 350,
  buttons: {
    OK: function() { $(this).dialog('close'); }
  }
});

使用 SweetAlert2 创建美观弹窗：

Swal.fire({
  title: 'SweetAlert2 Popup',
  text: 'This is a beautiful popup',
  icon: 'success',
  confirmButtonText: 'OK'
});