ajax 灯箱效果_示例代码

Ajax灯箱效果是一种常用的网页交互效果，它可以在不刷新整个页面的情况下，通过异步加载内容，实现弹出框或者模态框的效果。下面是一个实现Ajax灯箱效果的示例代码：

我们需要创建一个触发灯箱效果的按钮或者链接。比如，我们可以创建一个按钮，当用户点击该按钮时，触发灯箱效果：

<button id="lightbox-btn">点击弹出灯箱</button>

接下来，我们需要定义一个灯箱容器，用于展示灯箱内容。可以使用一个div元素来作为灯箱容器，并设置其样式为隐藏：

<div id="lightbox-container" style="display: none;"></div>

然后，我们可以使用JavaScript代码来处理按钮的点击事件，并通过Ajax请求获取灯箱内容。在获取到内容后，将其插入到灯箱容器中，并显示灯箱：

document.getElementById("lightbox-btn").addEventListener("click", function() {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var response = xhr.responseText;
      document.getElementById("lightbox-container").innerHTML = response;
      document.getElementById("lightbox-container").style.display = "block";
    }
  };
  xhr.open("GET", "lightbox-content.html", true);
  xhr.send();
});

在上述代码中，我们使用XMLHttpRequest对象发送一个GET请求，获取灯箱内容。当请求成功后，我们将获取到的内容插入到灯箱容器中，并将灯箱容器的display样式设置为block，以显示灯箱。

我们需要为灯箱容器添加关闭功能，使用户可以关闭灯箱。可以在灯箱容器中添加一个关闭按钮，并为其绑定点击事件，点击时隐藏灯箱：

<div id="lightbox-container" style="display: none;">
  <button id="lightbox-close">关闭</button>
</div>

document.getElementById("lightbox-close").addEventListener("click", function() {
  document.getElementById("lightbox-container").style.display = "none";
});

通过上述代码，我们实现了一个基本的Ajax灯箱效果。当用户点击按钮时，通过Ajax请求获取灯箱内容，并将内容插入到灯箱容器中显示出来。用户可以通过点击关闭按钮来隐藏灯箱。