包含html链接的Bootstrap弹出窗口只显示一次

Bootstrap是一个流行的前端开发框架，它提供了丰富的组件和样式，可以快速构建响应式网页。弹出窗口是Bootstrap中常用的组件之一，可以用来显示一些提示信息或者用户交互的内容。

在Bootstrap中，可以使用Modal组件来创建弹出窗口。要实现只显示一次的效果，可以借助浏览器的本地存储功能，例如使用localStorage来记录弹出窗口的显示状态。

以下是一个实现包含html链接的Bootstrap弹出窗口只显示一次的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Modal Example</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>

<!-- 弹出窗口 -->
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">弹出窗口标题</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        弹出窗口内容
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
  // 检查本地存储中是否已经显示过弹出窗口
  var isModalShown = localStorage.getItem('modalShown');
  if (!isModalShown) {
    // 如果未显示过，则显示弹出窗口
    var myModal = new bootstrap.Modal(document.getElementById('myModal'));
    myModal.show();
    // 将显示状态记录到本地存储中
    localStorage.setItem('modalShown', true);
  }
</script>

</body>
</html>

在上述代码中，我们使用了Bootstrap 5版本的CSS和JS文件，确保在页面中引入了这些文件。弹出窗口的内容可以根据实际需求进行修改。

通过JavaScript代码，我们首先检查本地存储中是否已经显示过弹出窗口，如果没有显示过，则创建一个Modal对象并调用show()方法显示弹出窗口。同时，将显示状态记录到本地存储中，以便下次访问页面时不再显示。

这样，就实现了包含html链接的Bootstrap弹出窗口只显示一次的效果。

腾讯云相关产品推荐：