jquery modal ajax-示例代码

温馨提示：这篇文章已超过276天没有更新，请注意相关的内容是否还可用！

jQuery modal ajax是一种常用的网页代码技术，它可以实现弹出窗口并通过ajax请求加载内容。使用这种技术，我们可以在网页中点击某个按钮或链接时，通过ajax请求加载一个新的页面或部分内容，并以弹出窗口的形式展示在当前页面上。

下面是一个示例代码，演示了如何使用jQuery modal ajax来实现弹出窗口并加载内容：


<!DOCTYPE html>
<html>
<head>
  <title>jQuery Modal Ajax示例</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
</head>
<body>
  <button id="openModal">打开弹出窗口</button>
  <div id="modalContent" style="display: none;">
    <h2>弹出窗口内容</h2>
    <p>这是通过ajax请求加载的内容。</p>
  </div>
  <script>
    $(document).ready(function() {
      // 当点击按钮时，执行以下代码
      $("#openModal").click(function() {
        // 发起ajax请求，加载内容
        $.ajax({
          url: "ajax-content.html", // ajax请求的URL
          success: function(response) {
            // 将返回的内容插入到弹出窗口中
            $("#modalContent").html(response);
            // 打开弹出窗口
            $("#modalContent").modal();
          }
        });
      });
    });
  </script>
</body>
</html>

在这个示例代码中，我们首先引入了jQuery库和jQuery Modal插件的样式和脚本文件。然后，在页面中添加了一个按钮和一个用于展示弹出窗口内容的`<div>`元素，并将其隐藏起来。

接着，我们使用`$(document).ready()`函数来确保页面加载完成后执行代码。在这个函数中，我们为按钮的点击事件绑定了一个处理函数。当按钮被点击时，该处理函数会执行以下操作：

1. 使用`$.ajax()`函数发起一个ajax请求，指定了请求的URL为"ajax-content.html"。这个URL可以是一个服务器端的页面或接口，用于返回我们需要加载的内容。

2. 在ajax请求成功后的回调函数中，我们将返回的内容插入到之前隐藏的`<div>`元素中，然后调用`$("#modalContent").modal()`来打开弹出窗口。

这样，当我们点击按钮时，就会发起ajax请求，加载内容，并将其展示在弹出窗口中。通过使用jQuery modal ajax技术，我们可以方便地实现弹出窗口并加载内容的功能。

jquery modal ajax-示例代码

相关阅读