当前位置：首页 > jquery

jquery弹出页面

2026-03-16 13:09:11jquery

jQuery 弹出页面实现方法

使用 jQuery UI Dialog

jQuery UI 的 Dialog 组件可以快速实现弹出窗口功能。确保已引入 jQuery 和 jQuery UI 库。

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="dialog" title="弹出窗口标题">
  <p>这里是弹出窗口的内容。</p>
</div>

<script>
$(function() {
  $("#dialog").dialog({
    autoOpen: false,
    modal: true,
    width: 400
  });

  $("#open-dialog").click(function() {
    $("#dialog").dialog("open");
  });
});
</script>

<button id="open-dialog">打开弹出窗口</button>

使用 Bootstrap Modal

如果项目使用 Bootstrap，可以利用其模态框组件配合 jQuery。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  打开弹出窗口
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">弹出窗口标题</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>这里是弹出窗口的内容。</p>
      </div>
    </div>
  </div>
</div>

自定义简单弹出层

不需要依赖大型库时，可以用 jQuery 实现简单弹出效果。

jquery弹出页面

<style>
.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 999;
}
.popup-content {
  background: white;
  width: 80%;
  max-width: 500px;
  margin: 100px auto;
  padding: 20px;
}
</style>

<div class="popup-overlay">
  <div class="popup-content">
    <h3>弹出窗口标题</h3>
    <p>这里是弹出窗口的内容。</p>
    <button class="close-popup">关闭</button>
  </div>
</div>

<button class="open-popup">打开弹出窗口</button>

<script>
$(document).ready(function() {
  $(".open-popup").click(function() {
    $(".popup-overlay").fadeIn();
  });

  $(".close-popup").click(function() {
    $(".popup-overlay").fadeOut();
  });
});
</script>