关闭引导对话框后滚动条消失答案

【问题标题】：Scrollbar disappears after closing Bootstrap Dialog关闭引导对话框后滚动条消失
【发布时间】：2015-06-03 20:09:23
【问题描述】：

我的网站有问题。我使用 Bootstrap 3.2 和 Bootstrap 对话框而不是模态。当对话框打开时，有一个滚动条，但关闭它会使滚动条消失。我已经阅读了很多主题，但我还没有找到可行的解决方案。有没有办法解决这个问题？

所以，这是我的对话代码：

$("a.removeClass").click(function() {

        var uid = $(this).attr('id');   

        BootstrapDialog.show({
            message: 'Czy na pewno chcesz usunąć tą klasę?',
            title: 'Usuwanie klasy',
            buttons: [{
                label: 'Usuń klasę',
                cssClass: 'btn-danger',
                action: function(dialog) {
                    $(location).attr('href','index.php?app=admin&section=classes&uid=' + uid + '&remove');
                }
            }]
        });
    });

它也不起作用：How can I prevent body scrollbar and shifting when twitter bootstrap modal dialog is loaded?

【问题讨论】：

那么...问题是什么？
欢迎来到 SO。为了让人们更好地帮助您，您应该确保清楚地说明您的问题。同时贴出相关代码，让社区知道你尝试了哪些解决方案。

标签： javascript html css twitter-bootstrap

【解决方案1】：

将此添加到您的 CSS 中：

.modal {
  overflow-y: auto;
}
/* custom class to add space for scrollbar */
.modal-scrollbar {
    margin-right: 15px;
}

这给你的 JS：

(function($) {

$(document)
    .on( 'hidden.bs.modal', '.modal', function() {
        $(document.body).removeClass( 'modal-scrollbar' );
    })
    .on( 'show.bs.modal', '.modal', function() {
        // Bootstrap's .modal-open class hides any scrollbar on the body,
        // so if there IS a scrollbar on the body at modal open time, then
        // add a right margin to take its place.
        if ( $(window).height() < $(document).height() ) {
            $(document.body).addClass( 'modal-scrollbar' );
        }
    });

})(window.jQuery);

通过-How can I prevent body scrollbar and shifting when twitter bootstrap modal dialog is loaded?

【讨论】：