打开Bootstrap Model并一键加载加载iframe

是指使用Bootstrap框架中的模态框（Modal）组件，并通过一键操作加载一个包含iframe的内容。

Bootstrap是一个流行的前端开发框架，它提供了一套用于构建响应式、移动设备优先的网站和应用程序的CSS和JavaScript组件。其中的模态框组件可以用来创建弹出窗口，用于显示额外的内容或执行特定的操作。

加载iframe是指在模态框中加载一个包含另一个网页的iframe元素。通过加载iframe，可以在模态框中显示其他网页的内容，实现在当前页面上展示外部网页的效果。

使用Bootstrap打开模态框并一键加载加载iframe的步骤如下：

引入Bootstrap的CSS和JavaScript文件到HTML页面中。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

创建一个按钮或其他触发元素，用于打开模态框。

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  打开模态框
</button>

创建一个模态框，并设置其id为"myModal"，同时设置其内容为一个包含iframe的div。

<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">
        <iframe src="https://example.com" width="100%" height="400"></iframe>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

在上述代码中，data-bs-target属性指定了模态框的目标id，即"#myModal"，点击按钮时会打开该模态框。模态框的内容部分使用了一个iframe元素，通过设置src属性为要加载的网页地址，可以在模态框中显示该网页的内容。

这样，当用户点击按钮时，模态框会弹出并加载指定网页的内容。

关于Bootstrap模态框的更多信息和用法，可以参考腾讯云的相关产品文档：