html - 在打开模态窗口后隐藏 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');