前端提示框：超越alert，轻松打造美观弹窗

2023-05-12 15:46:46

告别古板，拥抱精致：定制化弹出提示框之旅

现代网页设计中，提升用户交互体验至关重要。传统的 alert 弹出窗因其生硬的外观和中断程序执行的弊端而饱受诟病。为了满足用户对美观、流畅交互的需求，本文将引导您使用 HTML、CSS 和 JavaScript 制作一个简单而精致的弹出提示框，摆脱 alert 的单调与繁琐。

踏上精美的弹窗之旅

构建 HTML 骨架

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <button id="open-button">点我</button>
  <div id="popup" class="hidden">
    <h1>弹窗提示</h1>
    <p>欢迎使用自定义弹窗！</p>
    <button id="close-button">关闭</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

用 CSS 美化弹窗

#popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 200px;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  z-index: 999;
  display: none;
}

#popup h1 {
  font-size: 1.5em;
  margin-bottom: 10px;
}

#popup p {
  font-size: 1em;
  margin-bottom: 20px;
}

#popup button {
  padding: 5px 10px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  cursor: pointer;
}

#popup button:hover {
  background-color: #e0e0e0;
}

使用 JavaScript 赋予弹窗生命

const openButton = document.getElementById('open-button');
const popup = document.getElementById('popup');
const closeButton = document.getElementById('close-button');

// 打开弹窗
const openPopup = () => {
  popup.classList.remove('hidden');
};

// 关闭弹窗
const closePopup = () => {
  popup.classList.add('hidden');
};

// 绑定事件监听器
openButton.addEventListener('click', openPopup);
closeButton.addEventListener('click', closePopup);