bootstrap的弹窗剧中_bootstrap弹窗居中处理
时间: 2023-11-26 19:00:14 浏览: 65
Bootstrap弹出框水平居中,垂直居中
要使Bootstrap弹窗居中,可以使用以下方法:
1. 使用CSS样式将模态框的位置设置为居中:
```
.modal {
text-align: center;
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
```
2. 使用JavaScript将模态框的位置设置为居中:
```
$(document).ready(function() {
$('.modal').on('show.bs.modal', function (e) {
var modal = $(this);
var dialog = modal.find('.modal-dialog');
modal.css('display', 'block');
// Set the position of the modal dialog.
dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));
});
});
```
这将在模态框显示时设置其位置为居中。
阅读全文