Bootstrap模态滚动背景内容

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

这个问题的第一个答案对我有用。 我刚刚添加

body.modal-open {
  overflow: visible;
}

给我的CSS。