H5实现弹窗

使用HTML5和CSS实现基础弹窗

HTML结构部分需创建一个弹窗容器和触发按钮。弹窗默认隐藏，通过CSS控制样式和显示状态。

<button id="openModal">打开弹窗</button>
<div id="modal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>这里是弹窗内容</p>
  </div>
</div>

CSS部分定义弹窗样式和动画效果

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  width: 80%;
  max-width: 600px;
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

JavaScript控制弹窗交互

通过DOM操作实现弹窗的显示/隐藏功能，添加事件监听器处理用户交互。

const modal = document.getElementById("modal");
const btn = document.getElementById("openModal");
const span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

使用dialog元素实现原生弹窗

HTML5原生提供<dialog>元素，兼容现代浏览器，需配合polyfill处理兼容性问题。

<dialog id="nativeModal">
  <p>原生弹窗内容</p>
  <button id="closeNativeModal">关闭</button>
</dialog>
<button id="openNativeModal">打开原生弹窗</button>

JavaScript控制逻辑更简洁

const dialog = document.getElementById("nativeModal");
document.getElementById("openNativeModal").addEventListener("click", () => {
  dialog.showModal();
});

document.getElementById("closeNativeModal").addEventListener("click", () => {
  dialog.close();
});

响应式弹窗设计技巧

CSS媒体查询确保弹窗在不同设备上正常显示

@media (max-width: 768px) {
  .modal-content {
    width: 95%;
    margin: 30% auto;
  }
}

添加过渡效果提升用户体验

.modal-content {
  transition: transform 0.3s ease-out;
  transform: translateY(-20px);
}

.modal.show .modal-content {
  transform: translateY(0);
}