Bootstrap: pasek przewijania znika po zamknięciu modalnym

Question

Używam Boostrap 3 i mam jeden modal wyświetlający zawartość HTML i ma pasek przewijania, ponieważ cała zawartość nie pasuje do widoku. Wewnątrz tego modalu znajduje się link do otwarcia innego modalu. Wszystko działa dobrze, drugi modał się otwiera, ale kiedy go zamknę, pasek przewijania zniknie i nie będę mógł przewijać pierwszego modalu (nie można przewijać za pomocą kółka myszy). Oto kod dla czasowniki modalne:

<!-- First modal for creating voucher --> 

<div class="modal fade" id="createVoucherModal" tabindex="-1" role="dialog" aria-labelledby="createVoucherModal" aria-hidden="true"> 
    <div class="modal-dialog" style="width: 800px;"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Zatvori</span></button> 
       <h4 class="modal-title">Izradi voucher</h4> 
      </div> 
      <div id="voucher-modal-body" class="modal-body" style="margin: 20px 40px 20px 40px;"> 
       <!-- here goes dinamically created content (with jQuery) --> 
      </div> 
      <div class="modal-footer"> 
       <a id="modal-create-pdf" href="" target="_blank"><button type="button" class="btn btn-primary" id="">Kreiraj PDF</button></a> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Zatvori</button> 
      </div> 
     </div> 
    </div> 
</div> 

<!-- Second modal for editing note voucher --> 

<div class="modal fade" id="editVoucherNoteModal" tabindex="-1" role="dialog" aria-labelledby="editVoucherNoteModal" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Zatvori</span></button> 
       <h4 class="modal-title">Uredi bilješke</h4> 
      </div> 
      <div id="voucher-modal-body" class="modal-body"> 
       <textarea style="width: 100%; height: 100px;" id="voucher_note_input"></textarea> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-primary voucher_note_edit_button">Spremi</button> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Zatvori</button> 
      </div> 
     </div> 
    </div> 
</div> 

Ciało pierwszego modalnym jest pusta, ponieważ jest dinamically wygenerowany z jQuery, ale tu jest link do otwarcia drugiego modal

<a href="javascript:;" data-toggle="modal" data-target="#editVoucherNoteModal" id="voucher_note_edit" style="display: none;">Uredi</a> 

Zdjęcia są ze sobą powiązane, ponieważ mogę” t przesłać je tam bez 10 reputacji:

Pictures

pierwszy z nich pokazuje pierwszy modalne otwarty, na drugim zdjęciu jest seco Otwiera się mod i na trzecim zdjęciu drugi modał jest zamknięty i nie ma paska przewijania.

Answer 1

Byłem niecierpliwy, więc próbowałem i wreszcie znalazłem rozwiązanie, które działa. Dodałem

style="overflow-y: scroll;" 

do elementu DIV pierwszy modalnej, teraz wygląda to tak:

<div class="modal fade" style="overflow-y: scroll;" id="createVoucherModal" tabindex="-1" role="dialog" aria-labelledby="createVoucherModal" aria-hidden="true"> 
    <div class="modal-dialog" style="width: 800px;"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Zatvori</span></button> 
       <h4 class="modal-title">Izradi voucher</h4> 
      </div> 
      <div id="voucher-modal-body" class="modal-body" style="margin: 20px 40px 20px 40px;"> 

      </div> 
      <div class="modal-footer"> 
       <a id="modal-create-pdf" href="" target="_blank"><button type="button" class="btn btn-primary" id="">Kreiraj PDF</button></a> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Zatvori</button> 
      </div> 
     </div> 
    </div> 
</div> 

I to działa!

Answer 2

Innym sposobem może być dodanie wyjętą klasa „modal-open” z „ciała”, po drugie modalna jest ukryta:

$('#editVoucherNoteModal').on('hidden.bs.modal' , function() { 
    $('body').addClass('modal-open'); 
}); 

Działa to na swoim przykładzie, ale jeśli masz inny modalne otwarty można użyć tego rozwiązania:

$('#editVoucherNoteModal').on('hidden.bs.modal' , function() { 
    if ($('.modal:visible').length) { 
     $('body').addClass('modal-open'); 
    } 
}); 

Uwaga: będzie za „dziwne” (i mówię dziwne moich standardów) zachowanie z paska przewijania i prawej wyściółką ciała, które mogą potrzebować odnośnika do bootstrap Kod JS, ale do szybkiego użycia podaję to, co dla mnie działa.

Answer 3

zrobiłem coś takiego:

$('.modal').on('shown.bs.modal', function() { 
    $('body').addClass('modal-open'); 
    }) 

    $(".modal [data-toggle='modal']").click(function(){ 
    $(this).closest(".modal").modal('hide'); 
    }); 

będzie służyć za jakiekolwiek modalnym ciągu, modalnego że pochodzi się pojawiać. Zauważ, że pierwsza jest zamknięta, więc pojawia się druga. Brak zmian w strukturze Bootstrap.