在打开模态窗口后隐藏html溢出

Question

打开模态窗口后，可见2个滚动（html和模态）。 我想隐藏html溢出，并在关闭模态窗口后可见。 没有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的方法来显示/隐藏模态。它会自动处理HTML溢出。

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