当前位置：首页 > jquery

jquery弹出窗口

2026-02-03 12:21:37jquery

jQuery 弹出窗口实现方法

使用 jQuery 可以轻松实现多种类型的弹出窗口，包括模态框、提示框和自定义弹出层。以下是几种常见实现方式：

基础模态框实现

引入 jQuery 和 jQuery UI 库后，通过 dialog() 方法创建模态窗口：

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

<div id="dialog" title="基本对话框">
  <p>这是一个模态弹出窗口</p>
</div>

<script>
$(function() {
  $("#dialog").dialog({
    modal: true,
    buttons: {
      "确定": function() {
        $(this).dialog("close");
      }
    }
  });
});
</script>

自定义弹窗组件

jquery弹出窗口

通过动态创建 DOM 元素实现自定义弹窗：

<style>
.custom-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  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;
  border: 1px solid #888;
  width: 80%;
}
</style>

<button id="showModal">打开弹窗</button>

<script>
$("#showModal").click(function() {
  const modal = $('<div class="custom-modal"><div class="modal-content"><h3>自定义弹窗</h3><p>内容区域</p><button class="close">关闭</button></div></div>');

  modal.find(".close").click(function() {
    modal.fadeOut(300, function() {
      $(this).remove();
    });
  });

  $("body").append(modal);
  modal.fadeIn(300);
});
</script>

使用第三方插件

推荐使用 Magnific Popup 等专业插件：

jquery弹出窗口

<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>

<a class="popup-link" href="#test-popup">打开弹窗</a>

<div id="test-popup" class="white-popup mfp-hide">
  插件实现的弹窗内容
</div>

<script>
$('.popup-link').magnificPopup({
  type: 'inline',
  closeOnBgClick: false
});
</script>

AJAX 内容弹窗

加载远程内容到弹窗：

$("#ajaxPopup").click(function() {
  $.ajax({
    url: "content.html",
    success: function(data) {
      $("<div>").html(data).dialog({
        width: 500,
        modal: true
      });
    }
  });
});

注意事项