使用jQuery实现模态框与弹窗效果

<!-- 模态框 -->
<div class="modal">
  <div class="modal-content">
    <h2>模态框标题</h2>
    <p>这是模态框的内容。</p>
    <button class="close">关闭</button>
  </div>
</div>

<!-- 弹窗 -->
<div class="popup">
  <div class="popup-content">
    <h2>弹窗标题</h2>
    <p>这是弹窗的内容。</p>
    <button class="close">关闭</button>
  </div>
</div>

$(document).ready(function() {
  // 点击按钮或链接显示模态框或弹窗
  $('.open-modal').click(function() {
    $('.modal').fadeIn();
  });

  $('.open-popup').click(function() {
    $('.popup').fadeIn();
  });

  // 点击关闭按钮或遮罩层关闭模态框或弹窗
  $('.modal .close, .modal').click(function() {
    $('.modal').fadeOut();
  });

  $('.popup .close, .popup').click(function() {
    $('.popup').fadeOut();
  });

  // 阻止点击内容容器冒泡
  $('.modal-content, .popup-content').click(function(event) {
    event.stopPropagation();
  });
});

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

.modal-content, .popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
}

.close {
  background-color: #333;
  color: #fff;
  border: none;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
}