Bootstrap: scrollbar scompare dopo la chiusura modale

Question

Sto usando Boostrap 3 e ho una modale che mostra alcuni contenuti HTML, e ha una barra di scorrimento poiché tutto il contenuto non si adatta alla vista. All'interno di questa modale, c'è un link per aprire un'altra modale. Tutto funziona bene, la seconda modale si apre ma quando la chiudo, la barra di scorrimento scompare e non riesco a scorrere sul primo modale (non è possibile scorrere anche con la rotellina del mouse). Ecco il codice per modali:

<!-- 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> 

corpo del primo modale è vuota perché è dinamicamente generato con jQuery, ma ecco il link per l'apertura di secondo modale

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

Pictures sono legate, dal momento che puo' t caricarle lì senza 10 reputazione:

Pictures

primo mostra prima modale aperta, sulla seconda immagine c'è seco nd modal aperto e nella terza immagine la seconda modal è chiusa e non c'è barra di scorrimento.

Answer 1

Ero impaziente, quindi ho continuato a provare e finalmente ho trovato una soluzione che funziona. Ho aggiunto

style="overflow-y: scroll;" 

all'elemento DIV prima modale, ora sembra che questo:

<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> 

E funziona!

Answer 2

Un altro modo potrebbe essere quello di aggiungere il 'modal-open' di classe rimosso dal 'corpo' dopo la seconda modale è nascosta:

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

Questo funziona per il tuo esempio, ma se avete un altro modale aperto è possibile utilizzare questa soluzione:

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

Nota: ci saranno una 'strana' (e dico strano per i miei standard) il comportamento con la barra di scorrimento e l'imbottitura destro del corpo che potrebbe aver bisogno di una ricerca per il Bootstrap Codice JS, ma per un rapido utilizzo do quello che ha funzionato per me.

Answer 3

ho fatto qualcosa di simile:

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

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

Servirà per qualsiasi modale whithin un modale che verrà a presentarsi. Si noti che il primo è chiuso in modo che compaia il secondo. Nessuna modifica nella struttura Bootstrap.