Bootstrap在5.1 中，对标签行内属性进行了修改。以下案例均以 bootstrap.bundle.min.js 5.1版本为基础 ### 模态框（Modal） **触发按钮** ```html <a href="JavaScript:;" data-bs-toggle="modal" data-bs-target="#exampleModalCenter">触发按钮</a> ``` 必须属性 ||| | ------------ | ------------ | |data-bs-toggle="modal"|触发类型：modal| |data-bs-target="#exampleModalCenter"|触发目标ID：exampleModalCenter| **触发目标** ```html <div class="fade modal" id="exampleModalCenter"> <div class="modal-dialog"> <div class="modal-content"> <a href="JavaScript:;" class="modal-close" data-bs-dismiss="modal">X</a> <p>这里是内容</p> <div class="modal-btn"> <button type="button" class="pn pn-primary">Save changes</button> <button type="button" class="pn pn-secondary" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div> ``` 必须属性 ||| | ------------ | ------------ | |class="fade"|用于 css 的过渡效果| |class="modal"|用于触发关闭按钮| |id="exampleModalCenter"|与触发按钮中 data-bs-target 值保持一致| |class="modal-dialog"|用于 display: flex 至 class="modal-content" 缺少此层会导致触发目标整体失效| |class="modal-content"|整体模态框框架| |data-bs-dismiss="modal"|用于关闭模态框，需与 父级 class="modal" 保持一致| **参照案例** 触发按钮 ```html <a href="JavaScript:;" class="modal-a" data-bs-toggle="modal" data-bs-target="#Create_Window"><i class="YuLunFonts iconfont-moban-2 xi3"></i></a> ``` 触发目标 ```html <div class="WindowBox fade modal" id="Create_Window"> <div class="modal-dialog"> <div class="modal-content"> <a href="JavaScript:;" class="modal-close" data-bs-dismiss="modal"><i class="YuLunFonts iconfont-close xi3"></i></a> <div class="modal-btn"> <button type="button" class="pn pn-primary">Save changes</button> <button type="button" class="pn pn-secondary" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div> ``` css ```css .fade:not(.show) { opacity: 0; } .fade { transition: opacity .15s linear; } .WindowBox { position: fixed; display: none; width: 100%; height: 100%; z-index: 1020; } .modal-dialog { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; transition: transform .3s ease-out; transform: translate(0,-50px); } .modal-content { position: relative; display: flex; flex-direction: column; align-items: flex-end; min-width: 300px; background-color: #FFF; padding: 50px; border-radius: 5px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1); } .modal-close { position: absolute; top: 20px; right: -40px; display: block; width: 22px; height: 22px; line-height: 22px; } .modal-close i { font-size: 22px; } .modal-backdrop { position: fixed; left: 0; top: 0; z-index: 1010; width: 100%; height: 100%; background-color: #000; } .modal-backdrop.show { opacity: .5; } .show .modal-dialog { transform: none; } .modal-btn { margin-top: 40px; display: flex; justify-content: flex-end; width: 100%; height: 40px; } .modal-btn button{ height: 40px; line-height: 40px; padding: 0 20px; } .modal-btn button + button{ margin-left: 20px; } .modal-open .modal-a i{ color: #3796F6 !important; } ``` 注： 1. `fade:not(.show) { opacity: 0; }` 便于多次附加 opacity 的 0 与 1 。即当 .fade 同级没有 .show 时。（当 存在 .show 时，该属性不触发） 2. fade 的CSS 过渡效果需单独给出。否则在关闭时无法触发 .WindowBox 的淡出 3. WindowBox 定义模态框框架 4. modal-dialog 弹性布局定义模态框居中并定义过渡效果为 `transform: translate(0,-50px)` 5. 由于 modal-content 层中无法给予固定宽高，modal-dialog 层使用弹性布局，这样就导致 modal-dialog 层原本可以触发 modal-dialog 层视觉外任意处点击关闭功能失效。否则应当给予 `margin: 0 auto` 居中，这样视觉外任意处可直接关闭模态框。 6. modal-content 整体模态框框架的样式 7. modal-close 关闭按钮的样式 8. modal-backdrop 定义遮罩层
