jquery写一个弹窗

以下是一个简单的jquery弹窗示例：

HTML代码：

<button id="open-popup">打开弹窗</button>
<div id="popup" class="popup">
  <div class="popup-content">
    <h2>弹窗标题</h2>
    <p>这是弹窗内容</p>
    <button id="close-popup">关闭</button>
  </div>
</div>

CSS代码：

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

.popup-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

jQuery代码：

$(document).ready(function() {
  $("#open-popup").click(function() {
    $("#popup").fadeIn();
  });

  $("#close-popup").click(function() {
    $("#popup").fadeOut();
  });

  $(window).click(function(event) {
    if (event.target.id == "popup") {
      $("#popup").fadeOut();
    }
  });
});

以上代码将为按钮添加一个单击事件，当点击按钮时，弹窗将通过淡入效果显示出来。弹窗包含一个标题、内容和关闭按钮。关闭按钮和弹窗背景的单击事件将通过淡出效果将弹窗隐藏。