这是一个基于
Bootstrap 4的
模态框弹出效果的示例代码：
HTML代码：
```html
<!--
模态框弹出按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
弹出
模态框
</button>
<!--
模态框弹出窗口 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">
模态框标题</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="关闭">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>这里是
模态框的内容</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
```
CSS代码：
```css
/* 设置
模态框弹出窗口的样式 */
.modal-dialog {
max-width: 600px;
}
/* 设置
模态框标题的样式 */
.modal-header {
background-color: #007bff;
color: #fff;
}
/* 设置
模态框关闭按钮的样式 */
.modal-header .close {
color: #fff;
}
/* 设置
模态框保存按钮的样式 */
.modal-footer .btn-primary {
background-color: #007bff;
border-color: #007bff;
}
/* 设置
模态框关闭按钮和保存按钮之间的间距 */
.modal-footer .btn-secondary {
margin-right: 10px;
}
```
JavaScript代码：
```javascript
// 初始化
模态框
$('#myModal').modal({
backdrop: 'static',
keyboard: false,
show: false
});
```
这段代码中，我们使用了
Bootstrap 4的
模态框组件来
实现弹出效果。我们首先创建了一个按钮，设置了data-toggle和data-target属性，这两个属性用于触发
模态框的弹出。然后，我们创建了一个
模态框的弹出窗口，设置了id属性和aria-labelledby属性，这两个属性用于指定
模态框的唯一标识和标题。在
模态框的弹出窗口中，我们分别创建了
模态框的标题、内容和底部按钮。最后，我们使用JavaScript代码来初始化
模态框，设置了backdrop、keyboard和show属性，这些属性用于控制
模态框的行为。
在网站设计中，通过iframe实现页面嵌套能提高代码复用性和快速更新内容。但子页面的bootstrap4模态框默认仅在子页面内显示。为将模态框应用到顶级页面，需在子页面JS中获取顶级页面body，创建并附加模态框HTML，然后利用appendTo方法将模态框插入顶级页面，并通过load方法加载内容，设置backdrop属性实现交互。
最低0.47元/天 解锁文章
4139
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
