javascript - 修复打开和关闭 Angular ui Bootstrap 的 uib-modal 时的页面移位

Question

打开和关闭uib-modal时出现页面移位。检查https://angular-ui.github.io/bootstrap/#/modal 。注意滚动条的消失和出现。

这个问题已经在这里提出( Opening AngularJS modal causes page to shift if scrollbar exists )，但没有有效的解决方案。给出的唯一解决方案是将overflow-y设置为body，即使不需要滚动，它也会创建垂直滚动。

body{
overflow-y: scroll !important;
}

还访问了以下链接，但无法针对 uib-modal 实现它。有什么办法可以解决这个问题吗？提前致谢。

1. https://github.com/twbs/bootstrap/issues/9855
2. https://github.com/angular-ui/bootstrap/issues/3714

Answer 1

可能会发生移动，因为当模态打开时，它会向主体添加一些填充。由于一些错误，我不确切知道即使模式关闭并且由于页面移动，此填充仍然保留在主体中。

当点击按钮关闭模态时，您可以尝试 -

    $("#ModalId").modal('hide');
    $('.modal-backdrop').remove();
    $('body').removeClass('modal-open');
    $('body').css('padding-right', '');

它对我的情况有效。