Bootstrap modal scrolls background content

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.