如何将模态框居中到屏幕中心？ 这是我的 html 和 js 代码 它可以在 Chrome 控制台中运行，但是当我刷新此页面时 - 它不起作用
$('.modal').css('top', $(window).outerHeight() / 2 - ($(".modal-dialog").outerHeight()) / 2 + 'px');
【问题讨论】：
标签： javascript jquery html css twitter-bootstrap
尝试类似：
$('.modal').css('margin-top', (Math.floor((window.innerHeight - $('.modal')[0].offsetHeight) / 2) + 'px');
【讨论】：
简单的解决方法
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
【讨论】：
max-height: 90%; 它对我有用
不需要jQuery，只需要使用css即可：
body {
background: gray;
}
.modal {
background: green;
position: absolute;
float: left;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}<div class="modal">
Lorem ipsum
</div>如果你更喜欢 jQuery 解决方案，那就是：
$(function() {
var modal = $(".modal");
var body = $(window);
// Get modal size
var w = modal.width();
var h = modal.height();
// Get window size
var bw = body.width();
var bh = body.height();
// Update the css and center the modal on screen
modal.css({
"position": "absolute",
"top": ((bh - h) / 2) + "px",
"left": ((bw - w) / 2) + "px"
})
});body {
background: gray;
}
.modal {
background: green;
float: left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal">
Lorem ipsum
</div>【讨论】：
Float: left? :)
在 js 文件中添加以下代码。 笔记： "#mydialog" 更改为您的选择器（对话框类或 ID）
$(function() {
$(window).resize(function(event) {
$('#mydialog').position({
my: 'center',
at: 'center',
of: window,
collision: 'fit'
});
});
}); 谢谢， 阿南德。
【讨论】：
这样试试
.modal {
text-align: center;
padding: 0!important;
}
.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px;
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
如果你更喜欢 jquery，那就试试这个
function setModalMaxHeight(element) {
this.$element = $(element);
this.$content = this.$element.find('.modal-content');
var borderWidth = this.$content.outerHeight() - this.$content.innerHeight();
var dialogMargin = $(window).width() < 768 ? 20 : 60;
var contentHeight = $(window).height() - (dialogMargin + borderWidth);
var headerHeight = this.$element.find('.modal-header').outerHeight() || 0;
var footerHeight = this.$element.find('.modal-footer').outerHeight() || 0;
var maxHeight = contentHeight - (headerHeight + footerHeight);
this.$content.css({
'overflow': 'hidden'
});
this.$element
.find('.modal-body').css({
'max-height': maxHeight,
'overflow-y': 'auto'
});
}
$('.modal').on('show.bs.modal', function() {
$(this).show();
setModalMaxHeight(this);
});
$(window).resize(function() {
if ($('.modal.in').length != 0) {
setModalMaxHeight($('.modal.in'));
}
});
【讨论】：
纯 Javascript
此代码在所有情况下都可以帮助您
var setDivCenter = function (classORid) {
var div = document.querySelector(classORid);
var Mwidth = div.offsetWidth;
var Mheight = div.offsetHeight;
var Wwidth = window.innerWidth;
var Wheight = window.innerHeight;
div.style.position = "absolute";
div.style.top = ((Wheight - Mheight ) / 2 +window.pageYOffset ) + "px";
div.style.left = ((Wwidth - Mwidth) / 2 +window.pageXOffset ) + "px";
};
【讨论】：
如果您使用的是 Bootstrap 模态，您只需将 .modal-dialog-centered 类添加到模态对话框。见下文
更改此行<div class="modal-dialog" role="document">
到此行<div class="modal-dialog modal-dialog-centered" role="document">
【讨论】：
如果您使用左侧 CSS 属性上的 CSS calc() 函数，使模态框居中是相当简单的。假设模态框的宽度为 600px。您可以使用屏幕宽度的 50% 减去模态宽度的一半。下面这个例子有 600px 的模态，所以我有 calc() 函数在 50% - 300px。
#modal {
position: fixed;
width: 600px;
top: 40px;
left: calc(50% - 300px);
bottom: 40px;
z-index: 100;
}
【讨论】：
你应该重写模态和模态对话框的 css 类：
.modal-dialog {
display: flex !important;
width: 50% !important;
pointer-events: none;
justify-content: center;
align-items: center;
}
.modal{
display:flex !important;
}
【讨论】：
.modal-dialog {
height: 100%;
width: 600px;
display: flex;
align-items: center;
}
.modal-content {
margin: 0 auto;
}
【讨论】：
请试试这个，它有效。
.modal-dialog {
min-height: calc(100vh - 60px);
display: flex;
flex-direction: column;
justify-content: center;
overflow: auto;
}
【讨论】：