jQuery模态框弹窗提示代码

以下是一个使用jQuery创建模态框弹窗提示的简单示例：

HTML部分：

<!-- 模态框HTML结构 -->
<div id="myModal" class="modal">
  <!-- 模态框内容 -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>这里是模态框内容！</p>
  </div>
</div>
 
<!-- 触发模态框的按钮 -->
<button id="openModal">打开模态框</button>

CSS部分：

/* 模态框的样式 */
.modal {
  display: none; /* 默认隐藏模态框 */
  position: fixed; /* 固定定位 */
  z-index: 1; /* 位于顶层 */
  left: 0;
  top: 0;
  width: 100%; /* 全宽度 */
  height: 100%; /* 全高度 */
  overflow: auto; /* 超出内容可滚动 */
  background-color: rgb(0,0,0); /* 背景颜色带些透明度 */
  background-color: rgba(0,0,0,0.4); /* 透明度 */
}
 
/* 模态框内容 */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 垂直居中 */
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
 
/* 关闭按钮 */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
 
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

jQuery部分：

// jQuery 代码
$(document).ready(function(){
  $("#openModal").click(function(){
    $("#myModal").css("display", "block");
  });
  
  $(".close").click(function(){
    $("#myModal").css("display", "none");
  });
 
  // 点击其他地方关闭模态框
  $(document).on("click", function(event){
    var $target = $(event.target);
    if(!$target.closest('.modal-content').length && !$target.closest('.open-modal').length){
      $("#myModal").css("display", "none");
    }
  });
  
  // 按键按下时检查关闭模态框
  $(document).on("keydown", function(event){
    if(event.key === "Escape") { // 检查按键是否为Esc
      $("#myModal").css("display", "none");
    }
  });
});

这段代码实现了一个简单的模态框功能，点击按钮会打开模态框，点击模态框内的关闭按钮或者任何其他地方都会关闭模态框，同时监听键盘的Esc键来关闭模态框。