Bootstrap modal 滚动背景内容

Question

当我打开一个模式时，背景页面会自动滚动到顶部。在我的 css 中，如果我删除 html{ overflow-y: scroll }; 我会修复此行为，但现在右侧的滚动条消失了，我的导航栏向右移动，滚动条占用的空间量相同。

我希望能够保留我的溢出设置并拥有它，这样背景内容就不会向上滚动。

example_controller.rb

def onsale
    @item= Products.first
    respond_to do |format|
      format.js
    end
  end

_header.html.erb

<div class="collapse navbar-collapse" id="navbar-collapse">
        <% if user_signed_in? %>
          <ul class="nav navbar-nav navbar-left">
            <li><%= link_to "Sale Items", onsale_path,  :remote => true %></li>
          </ul>
        <% end %>
</div>

application.html.erb 我把这个放在身体里 <div id="sale-modal"></div>

onsale.js.erb

$("#onsale-modal").html('<%= escape_javascript(render 'onsale') %>');

_onsale.html.erb

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <%= image_tag @item.picture.large.url %>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<script>$('#myModal').modal('show')</script>

application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap-sprockets
//= require bootstrap-select.min
//= require turbolinks
//= require fancybox
//= require_tree .

$(document).ready(function() {
  $('.selectpicker').selectpicker();
  $('.fancybox').fancybox({
    openEffect: 'elastic',
    closeEffect: 'elastic',
    prevEffect: 'fade',
    nextEffect: 'fade',
    padding: 10
  });

  if ($('#infinite-scrolling').length) {
    $(window).scroll(function() {
      var url = $('.pagination .next_page').attr('href');
      if (url && $(window).scrollTop() > $(document).height() - $(window).height() - 60) {
        // TODO - Removing this line was causing duplicates to load so it's worth investigating the cause
        $('.pagination').html('Please Wait...');
        return $.getScript(url);
      }
    });
    return $(window).scroll();
  }
  $('#myModal').modal('show')
  //Hide Scroll when modal about to show
    $('#myModal').on('show.bs.modal', function () {
        $('html').css({
            'overflow': 'hidden'
        });
    });
    //add Scroll back when modal is hidden
    $('#myModal').on('hidden.bs.modal', function () {
        $('html').css({
            'overflow-y': 'scroll'
        });
    });

});

如果我从部分中删除脚本 <script>$('#myModal').modal('show')</script> 并将其放入 application.js 中，就像上面一样，模式根本不会出现。如果我将行 $('#myModal').modal('show') 添加到 onsale.js.erb 中，模态将正常显示。

Answer 1

this 问题的第一个答案对我有用。我刚刚加了

body.modal-open {
  overflow: visible;
}

到我的CSS。