方法一:
HTML:
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></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>
JavaScript:
// Do like this for more best user experience,
// But you have to remove dialog "fade" class(Used animation)
$("[role='dialog']").on("shown.bs.modal", function() {
var $modalDialog = $(this).find(".modal-dialog"),
$modalBody = $(this).find(".modal-body"),
dialogHeight = $modalDialog.height(),
dialogWidth = $modalDialog.width(),
windowHeight = $(window).height(),
windowWidth = $(window).width();
// When dialog height greater than window height,
// use default margin top value to set dialog position.
if (windowHeight < dialogHeight) {
// do nothing
return;
}
// When dialog height less than window height,
// dialog position set it with vertical center.
$modalDialog.css({
"position": "absolute",
"top": "50%",
"left": "50%",
"marginLeft": - ( dialogWidth / 2 ),
"marginTop": - ( dialogHeight / 2 )
});
});
注:这种方式最好将fade class去掉,否则会有不好的用户体验
方式二:修改bootstrap.js源码
that.$element
.addClass('in')
.attr('aria-hidden', false)
that.enforceFocus()
/***************************************************************/
var $modalDialog = that.$element.find(".modal-dialog"),
dialogHeight = $modalDialog.height(),
windowHeight = $(window).height();
// When dialog height greater than window height,
// use default margin top value to set dialog position.
// if (windowHeight < dialogHeight) {
// do nothing
// return;
// }
// When dialog height less than window height,
// use margin top set it position.
// Dialog position set it with vertical center.
if (windowHeight > dialogHeight) {
$modalDialog.css({
"marginTop": ( windowHeight - dialogHeight) / 2
});
}
/**************************************************************/
var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })
注:块级注释间为增加代码,在bootstrap中722行
转载于:https://my.oschina.net/jak/blog/387693