Bootstrap 模态框的一些问题

2016/10/17 Posted by cliff

1. Bootstrap 打开模态框后导致body收缩,因为被添加了padding-right:17px。

以下解决方案由 kapilindore 提供,解决问题。

https://github.com/twbs/bootstrap/issues/14040

/This worked for me ---Bootstrap v3.3.6--- ---after bootstrap.css---/ body.modal-open { overflow-y: auto !important; padding-right: 0 !important; }

.modal-scrollbar-measure {

overflow: hidden; }


2. 模态框打开后form-control 的元素浮在模态框背景层之上

原来模态框的背景层没有定义z-index,导致 .input-group .form-control 定义的 z-index=2 大于覆盖层。

在模态框覆盖层(.modal-backdrop)添加 z-index=10,问题解决。

3. 模态框垂直居中

http://stackoverflow.com/questions/18422223/bootstrap-3-modal-vertical-position-center

$(function() {
    function reposition() {
        var modal = $(this),
            dialog = modal.find('.modal-dialog');
        modal.css('display', 'block');

        // Dividing by two centers the modal exactly, but dividing by three 
        // or four works better for larger screens.
        dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));
    }
    // Reposition when a modal is shown
    $('.modal').on('show.bs.modal', reposition);
    // Reposition when the window is resized
    $(window).on('resize', function() {
        $('.modal:visible').each(reposition);
    });
});
[本日志由 cliff 于 2016-10-19 09:03 PM 编辑]
kapilindore 引用0
暂时没有评论

发表评论