在模态 window 操作后隐藏 html 溢出

Question

打开模态window后，可见2个卷轴（html和模态）。我想隐藏 html 溢出，并在关闭模态 window 后显示。没有js怎么办？只有 css

$('.modal').on('show', function() {
    $("html").css({
        overflow: 'hidden'
    });
});

$('.modal').on('hide', function() {
    $("html").css({
        overflow: 'scroll'
    });
});

Answer 1

Bootstrap 模态的正确事件触发器是 'show.bs.modal' 和 'hide.bs.modal'

试试这个：

jQuery('.modal').on('show.bs.modal', function() {
    jQuery("html").css({
        overflow: 'hidden'
    });
});

jQuery('.modal').on('hide.bs.modal', function() {
    jQuery("html").css({
        overflow: 'scroll'
    });
});

但我强烈建议您使用 Bootstrap 的方法来 show/hide 模态。它会自动处理 HTML 溢出。

jQuery("#element").modal('show');
jQuery("#element").modal('hide');

在模态 window 操作后隐藏 html 溢出

Hide html overflow after opeping modal window

html

css

modal-dialog