Javascript 引导模式响应垂直定心?
如何使引导模式垂直居中?我在这里四处寻找解决方案,但他们没有反应,或者根本不起作用。我正在使用bootsrap3 使用以下解决方案后,当屏幕变小或调整浏览器窗口大小时,模式不再响应 jqueryJavascript 引导模式响应垂直定心?,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,如何使引导模式垂直居中?我在这里四处寻找解决方案,但他们没有反应,或者根本不起作用。我正在使用bootsrap3 使用以下解决方案后,当屏幕变小或调整浏览器窗口大小时,模式不再响应 jquery $('.modal').on('shown.bs.modal', function() { $(this).find('.modal-dialog').css({ 'margin-top': function () {
$('.modal').on('shown.bs.modal', function() {
$(this).find('.modal-dialog').css({
'margin-top': function () {
return -($(this).outerHeight() / 2);
},
'margin-left': function () {
return -($(this).outerWidth() / 2);
}
});
});
css
引导
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
<div class="modal-dialog custom-class">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
$('#myModal').on('shown.bs.modal', function (e) {
var object = $('.modal-dialog');
var object_outerheight = object.outerHeight();
var window_height = $(window).height();
var window_scrolltop = $(window).scrollTop();
var object_top = ((window_height - object_outerheight)/2) + window_scrolltop;
console.log(object_top);
// Set the object's position.
object.css({
marginTop: object_top + 'px'
}).fadeIn();
// Add responsive when the window is being resized.
$( window ).resize(function() {
// Redo the calc on each resize's action.
var window_height = $(window).height();
var window_scrolltop = $(window).scrollTop();
var object_top = ((window_height - object_outerheight)/2) + window_scrolltop;
console.log(object_top);
// Reset the object's position.
object.css({
marginTop: object_top + 'px'
});
});
});
在较小的屏幕上,模式只是回到默认位置,但我希望它垂直居中
此外,top:25%代码>根本不能使它完全垂直居中。我想就是这样
css
jquery+bootstrap
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
<div class="modal-dialog custom-class">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
$('#myModal').on('shown.bs.modal', function (e) {
var object = $('.modal-dialog');
var object_outerheight = object.outerHeight();
var window_height = $(window).height();
var window_scrolltop = $(window).scrollTop();
var object_top = ((window_height - object_outerheight)/2) + window_scrolltop;
console.log(object_top);
// Set the object's position.
object.css({
marginTop: object_top + 'px'
}).fadeIn();
// Add responsive when the window is being resized.
$( window ).resize(function() {
// Redo the calc on each resize's action.
var window_height = $(window).height();
var window_scrolltop = $(window).scrollTop();
var object_top = ((window_height - object_outerheight)/2) + window_scrolltop;
console.log(object_top);
// Reset the object's position.
object.css({
marginTop: object_top + 'px'
});
});
});
我想就是这样
css
jquery+bootstrap
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
<div class="modal-dialog custom-class">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
$('#myModal').on('shown.bs.modal', function (e) {
var object = $('.modal-dialog');
var object_outerheight = object.outerHeight();
var window_height = $(window).height();
var window_scrolltop = $(window).scrollTop();
var object_top = ((window_height - object_outerheight)/2) + window_scrolltop;
console.log(object_top);
// Set the object's position.
object.css({
marginTop: object_top + 'px'
}).fadeIn();
// Add responsive when the window is being resized.
$( window ).resize(function() {
// Redo the calc on each resize's action.
var window_height = $(window).height();
var window_scrolltop = $(window).scrollTop();
var object_top = ((window_height - object_outerheight)/2) + window_scrolltop;
console.log(object_top);
// Reset the object's position.
object.css({
marginTop: object_top + 'px'
});
});
});
使用css,我们可以将引导模式放置在垂直中心
.modal {
text-align: center;
padding: 0!important;
}
.modal:before {
content: '';
display: inline-block;
vertical-align: middle;
margin: -2px;
height: 100%;
}
.modal-dialog {
display: inline-block;
vertical-align: middle;
}
使用css,我们可以将引导模式放置在垂直中心
.modal {
text-align: center;
padding: 0!important;
}
.modal:before {
content: '';
display: inline-block;
vertical-align: middle;
margin: -2px;
height: 100%;
}
.modal-dialog {
display: inline-block;
vertical-align: middle;
}
你说模态不再响应是什么意思?你说模态不再响应是什么意思<代码>var window_scrolltop=$(window.scrolltop()如果我一直点击页面下方的按钮,code>对我来说是一个糟糕的工作(我的模态显示在页面下方,我不得不可笑地滚动到很远),所以我删除了这一行(以及下一行的+窗口\u scrolltop
)。我还在页边空白处加了一张支票,保证不低于零。(因为在非常小的屏幕尺寸上,我的modal顶部从屏幕上脱落)否则:谢谢你的回答<代码>var window_scrolltop=$(window.scrolltop()如果我一直点击页面下方的按钮,code>对我来说是一个糟糕的工作(我的模态显示在页面下方,我不得不可笑地滚动到很远),所以我删除了这一行(以及下一行的+窗口\u scrolltop
)。我还在页边空白处加了一张支票,保证不低于零。(因为在非常小的屏幕尺寸上,我的modal顶部从屏幕上脱落)否则:谢谢你的回答!