Question

我在这里（Prevent BODY from scrolling when a modal is opened）读到了这个......

public func +<T: CustomStringConvertible, U:CustomStringConvertible>(lhs: T, rhs: U)->String{
    return lhs.description+rhs.description
}

...将阻止在Bootstrap模式下滚动。或者这应该是默认设置？（不确定）出于某种原因，我不能让这个工作。我在我的Rails应用程序中使用最新版本的Bootstrap。 Bootstrap再次更改了吗？

在Bootstrap文档中，它说...... “模态插件通过数据属性或JavaScript按需切换隐藏内容。它还向body.modal-open { overflow: hidden; }添加.modal-open以覆盖默认滚动行为并生成<body>以提供点击区域单击模态外部时解除显示的模态。“

单击背景时解除模态的.modal-backdrop确实有效，但正如我所说，滚动的覆盖不起作用。非常奇怪，因为在我的其他Rails应用程序中，DOES下面的滚动覆盖工作，而点击背景上的解雇模式不起作用。非常奇怪，因为我似乎已经完全相同地实现了它们。

将.modal-backdrop添加到我的CSS确实会停止在模式下方滚动，但不幸的是，它会导致position: fixed;跳到顶部。无论我打开body的哪个位置，我都希望身体保持在相同的垂直位置。任何帮助非常感谢。感谢。

Answer 1

我实际上得到了Prevent BODY from scrolling when a modal is opened中'ling'的帮助。我使用他的CSS，然后为我的JS（改编为Ling的JS）做了这个......

// Prevent scrolling underneath Bootstrap modals
$( document ).ready(function() {
  $("a.modal-initiator").on("click", function() {
    currentScrollTop = $(window).scrollTop();
    $('html').addClass('noscroll').css('top', '-' + currentScrollTop + 'px');
  });

  $(".close-modal").on("click", function() { // modal 'close' buttons
    resumeScrollingAferModal();
  });

  $("#modal").on("click", function(e) { // grey area outside modal
    if( !$(e.target).is('modal-content') ) {
      resumeScrollingAferModal();
    }
  });

  function resumeScrollingAferModal() {
    $('html').removeClass('noscroll');
    $(window).scrollTop(currentScrollTop);
  }
});

不幸的是我不知道如何避免使用全局变量'currentScrollTop'。我仍然很好奇为什么模态的正常Bootstrap功能对我不起作用....

Bootstrap body modal-open，overflow：hidden不会阻止滚动

1 个答案: