Ajax加载外部页面弹出层效果实现方法

当通过Ajax请求获取HTML页面时，我们希望将其以弹出层的形式展示出来，而不是让其跳转到新页面。这种效果可以使用一下几个步骤实现：

步骤一：添加页面元素

首先需要在页面中添加一些HTML元素，包括弹出层和触发弹出层的按钮。

<!-- 弹出层 -->
<div id="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <div id="modal-body"></div>
  </div>
</div>

<!-- 触发弹出层的按钮 -->
<button id="modal-btn">打开弹出层</button>

步骤二：编写JavaScript代码

在JavaScript中，我们创建一个名为showModal的函数，用于向弹出层中添加HTML内容。

function showModal(url) {
  var modal = document.getElementById('modal');  // 获取弹出层
  var body = document.getElementById('modal-body');  // 获取弹出层中的内容部分

  // 发送Ajax请求获取HTML内容
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.onload = function() {
    body.innerHTML = xhr.responseText;  // 将获取到的HTML内容添加到弹出层中
    modal.style.display = 'block';  // 显示弹出层
  };
  xhr.send();
}

// 当按钮被点击时触发
document.getElementById('modal-btn').addEventListener('click', function() {
  showModal('./example.html');
});

步骤三：样式调整

最后，需要添加一些CSS样式来调整弹出层的样式。

/* 弹出层 */
#modal {
  display: none;  /* 默认不显示 */
  position: fixed;  /* 固定定位 */
  z-index: 1;  /* 层级 */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;  /* 在内容超过弹出层高度时添加滚动条 */
  background-color: rgba(0, 0, 0, 0.4);
}

/* 弹出层内容 */
.modal-content {
  background-color: white;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 600px;
}

/* 关闭按钮 */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

示例说明一：通过Ajax获取服务器数据

在下面的示例中，我们将通过Ajax请求获取来自服务器的数据，并将其添加到弹出层中展示。

HTML代码：

<!-- 弹出层 -->
<div id="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <div id="modal-body"></div>
  </div>
</div>

<!-- 触发弹出层的按钮 -->
<button id="modal-btn">打开弹出层</button>

JavaScript代码：

function showModal(url) {
  var modal = document.getElementById('modal');  // 获取弹出层
  var body = document.getElementById('modal-body');  // 获取弹出层中的内容部分

  // 发送Ajax请求获取服务器数据
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.onload = function() {
    var data = JSON.parse(xhr.responseText);  // 将获取到的JSON字符串转换为JavaScript对象
    var html = '<ul>';  // 构建HTML列表
    data.forEach(function(item) {
      html += '<li>' + item.title + '</li>';
    });
    html += '</ul>';
    body.innerHTML = html;  // 将构建的HTML添加到弹出层中
    modal.style.display = 'block';  // 显示弹出层
  };
  xhr.send();
}

// 当按钮被点击时触发
document.getElementById('modal-btn').addEventListener('click', function() {
  showModal('./example.json');
});

JSON数据：

[
  {
    "title": "第一条数据"
  },
  {
    "title": "第二条数据"
  },
  {
    "title": "第三条数据"
  }
]

示例说明二：通过Ajax获取外部HTML页面

在下面的示例中，我们将通过Ajax请求获取外部HTML页面，并将其添加到弹出层中展示。

HTML代码：

<!-- 弹出层 -->
<div id="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <div id="modal-body"></div>
  </div>
</div>

<!-- 触发弹出层的按钮 -->
<button id="modal-btn">打开弹出层</button>

JavaScript代码：

function showModal(url) {
  var modal = document.getElementById('modal');  // 获取弹出层
  var body = document.getElementById('modal-body');  // 获取弹出层中的内容部分

  // 发送Ajax请求获取HTML页面
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.onload = function() {
    body.innerHTML = xhr.responseText;  // 将获取到的HTML页面添加到弹出层中
    modal.style.display = 'block';  // 显示弹出层
  };
  xhr.send();
}

// 当按钮被点击时触发
document.getElementById('modal-btn').addEventListener('click', function() {
  showModal('./example.html');
});

example.html：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>外部HTML页面</title>
</head>
<body>
  <h1>这是外部HTML页面</h1>
  <p>用于演示Ajax加载外部页面弹出层效果。</p>
</body>
</html>

CSS代码：

/* 弹出层 */
#modal {
  display: none;  /* 默认不显示 */
  position: fixed;  /* 固定定位 */
  z-index: 1;  /* 层级 */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;  /* 在内容超过弹出层高度时添加滚动条 */
  background-color: rgba(0, 0, 0, 0.4);
}

/* 弹出层内容 */
.modal-content {
  background-color: white;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 600px;
}

/* 关闭按钮 */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Ajax加载外部页面弹出层效果实现方法 - Python技术站