记录－交流－Web开发知识分享
参考 https://fontawesomeicons.com/fa/bootstrap-modal-pass-data-dynamically#google_vignette
…
如果使用 JavaScript 则：
$('#myModal').modal({
backdrop: 'static',
keyboard: false
})
如果是“show”
$('#myModal').modal({backdrop: 'static', keyboard: false}, 'show');
或者在 HTML 中：
<a data-controls-modal="your_div_id" data-backdrop="static" data-keyboard="false" href="#">
…
这几天在写项目的中，页面使用了iframe，然而在子页面中使用bootstrap的模态框时发现：弹出的模态框位置是以子页面为标准居中的，并且遮罩层也只有子页面那一部分，整个页面简直无法直视，所以思考可以可以让模态框以父页面为标准弹出，经过在网上查找资料，总结了一种解决方法。
效果展示
修改前页面
修改后页面
实现思路
要想使模态框在顶级页面打开，我想到的方法是使bootstrap的模态框弹在父页面弹出即可。
首先我们将需要弹出的div单独写一个页面，当子页面需要弹出时，在父页面弹出div即可。
将模态框单独写为一个页面
主页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="modal Bootstrap v5.3.0 的稳定版本正式发布，新版本带来的变化包括：
Bootstrap 的核心已被重写，为黑暗模式提供了支持。此外，Bootstrap 现在支持任何数量的颜色模式，允许你建立自己的自定义主题或更细微的颜色模式。
为 Bootstrap 添加黑暗模式支持时，Bootstrap 团队并不想只是添加一个黑暗模式，而是想为一个颜色模式系统打下基础，这个系统可以用来创建任何数量的主题和颜色模式。
要添加一个自定义的颜色模式，需要创建你自己的 data-bs-theme 选择器，用一个自定义值作为你的颜色模式的名称，然后根据需要修改任何 Sass 和 CSS 变量。
新版本修改了调色板，包括新的 Sass 变量、CSS 变量和用于设置 color 、 background-color 和 border-color 的实用程序。
在 v5.3.0 版本中，链接的风格设计有了很大的改善，有了一系列全新的链接帮助器和工具。首先，新版本增加了一些样式，用新的图标链接助手将图标（如 Bootstrap Icons）与链接放在一起。
将 .nav-underline 添加到
Bootstrap v5.2.0 终于稳定了！我们已经解决了更多错误、改进了更多文档、编写了新指南并构建了新的功能环境示例，等等！
继续阅读测试版和稳定版的亮点。
正如我们在测试版中预览的那样，文档已经过重新设计！它从我们的新主页开始， 在那里我们更完整地展示了 Bootstrap 的功能和更新的设计。
文档侧边栏导航已经过大修，始终扩展组以便于浏览，全新的 DocSearch 体验与搜索历史，以及移动侧边栏和导航栏的新响应式画布抽屉。
我们甚至更新了导航栏中的版本选择器以在次要版本之间进行交叉链接！
通过我们的文档重新设计，我们使用修改后的 和 刷新了按钮和padding输入border-radius。下面是我们按钮的前后对比：
现在，几乎我们所有的组件都具有用于实时自定义的 CSS 变量、更轻松的主题化以及（很快）从暗模式开始的颜色模式支持。您可以查看每个文档页面上可用的 CSS 变量，例如我们的按钮：
--#{$prefix}btn-padding-x: #{$btn-padding-x
近期评论