如何将模态置于屏幕*?
问题描述:
如何将模态置于屏幕*? 这是我的HTML和JS代码 它可以在Chrome控制台,但是当我刷新此页面 - 它不工作如何将模态置于屏幕*?
$('.modal').css('top', $(window).outerHeight()/2 - ($(".modal-dialog").outerHeight())/2 + 'px');
答
试着这么做:
$('.modal').css('margin-top', (Math.floor((window.innerHeight - $('.modal')[0].offsetHeight)/2) + 'px');
答
解决
简单的方法.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
答
没有必要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>
答
添加以下代码js文件。 注: “#mydialog” 改变你的选择(Dialog类或ID)
$(function() {
$(window).resize(function(event) {
$('#mydialog').position({
my: 'center',
at: 'center',
of: window,
collision: 'fit'
\t });
\t });
}); \t
感谢, 阿南德。
+0
jQuery中的position方法不接受参数。这里有一个JS Bin展示你的代码在行动。 http://jsbin.com/?js,console,output请修改或更新您的答案。 – KryptoniteDove
答
尝试这样
.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'));
}
});
您使用的引导?如果是的话,[检查这个答案](http://*.com/questions/18053408/vertically-centering-bootstrap-modal-window) – Robiseb