Bootstrap Modal Problem - Scrolling wird deaktiviert

Ich habe ein modales und in diesem modalen gibt es ein Dropdown, das große versteckte Inhalte anzeigt, die funktioniert.Bootstrap Modal Problem - Scrolling wird deaktiviert

Wenn Sie jetzt das nächste Modal öffnen, das auf das erste Modal gestapelt ist und es verwerfen, wird das Scrollen auf Modal darunter deaktiviert.

Ich habe ein vollständiges Beispiel erstellt, einschließlich der Schritte zum Replizieren des Problems, dem ich gegenüberstehe. Sie können es sehen here.

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> 
    <title></title> 
    <style> 

    </style> 
</head> 
<body> 


    <input type="button" data-toggle="modal" data-target="#modal_1" class="btn btn-lg btn-primary" value="Open Modal 1" > 

    <div class="modal fade" id="modal_1"> 
     <div class="modal-dialog modal-sm"> 
      <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">Close</span></button> 
        <h4 class="modal-title">First Modal</h4> 
       </div> 
       <div class="modal-body"> 



        <form class="form"> 

         <div class="form-group"> 
          <label>1) Open This First: </label> 
          <input type="button" data-toggle="modal" data-target="#modal_2" class="btn btn-primary" value="Open Modal 2" > 
         </div> 

         <div class="form-group"> 
          <label>2) Change this once you have opened the modal above.</label> 
          <select id="change" class="form-control"> 
           <option value="small">Show Small Content</option> 
           <option value="large">Show Large Content</option> 
          </select> 
         </div> 

         <div id="large" class='content-div'> 
          <label>Large Textarea Content.. Try and scroll to the bottom..</label> 
          <textarea rows="30" class="form-control"></textarea> 

         </div> 

         <div id="small" class='content-div'> 
          <label> Example Text Box</label> 
          <input type="text" class="form-control"> 
         </div> 


        </form> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
      </div> 
     </div> 
    </div> 


    <div class="modal fade" id="modal_2"> 
     <div class="modal-dialog modal-sm"> 
      <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">Close</span></button> 
        <h4 class="modal-title">Second Modal</h4> 
       </div> 
       <div class="modal-body"> 

        <hp>This is the stacked modal.. Close this modal, then chenge the dropdown menu, you cannot scroll... </h5> 

       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
      </div> 
     </div> 
    </div> 


</body> 
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script> 
<script> 

    $(document).ready(function() { 


     $(".content-div").hide(); 
     $("#change").change(function() { 
      $(".content-div").hide(); 
      $("#" + $(this).val()).show(); 
     }); 


    }); 

</script> 
</html>

Hier ist ein Bootply das Verhalten in Aktion zeigen:

Bootply

Quelle

2015-01-21 Carl Smith

[ "Achten Sie darauf, nicht modal zu öffnen, während andere noch sichtbar ist. Mehr als eine modale zu einer Zeit, erfordert benutzerdefinierten Code "] (http://getbootstrap.com/javascript/#modals) und verstößt auch gegen den Zweck, für den die Mods gedacht waren. – Blazemonger

ich für Sie eine Lösung gefunden zu haben. Ich bin mir nicht sicher, warum es nicht funktioniert, aber nur ein Zeilencode in Ihrem CSS löst das Problem. Nach dem Schließen des zweiten Modals erhält der erste irgendwie overflow-y:hidden. Auch wenn es auf auto gesetzt ist.

Sie müssen diese neu zu schreiben und eigene Erklärung in CSS festgelegt:

#modal_1 { 
    overflow-y:scroll; 
}

Hier haben Sie eine Arbeits DEMO

bearbeiten: falschen Link, sorry. Diese

Quelle

2015-01-21 21:56:58 Kamil

ist auch eine Lösung

.modal { 
    overflow-y:auto; 
}

http://www.bootply.com/LZBqdq2jl5

Auto funktioniert gut :) Das wird eigentlich jede modale beheben, die höher ist als Ihre Bildschirmgröße ausgeführt wird.

Quelle

2015-01-21 22:01:32

Arbeitete wie ein Charme, vielen Dank. – Pruthviraj

Funktioniert perfekt! Danke –

Ich nehme an, das ist wegen eines Fehlers in Twitter Bootstrap. Es scheint, die Klasse aus dem Körper zu entfernen, selbst wenn zwei Modal geöffnet waren. Sie können in einem Test für jQuerys removeClass Funktion schuhen und es umgehen, wenn ein Modal noch geöffnet ist (Kredit für die Basisfunktion geht zu dieser Antwort: https://stackoverflow.com/a/1950199/854246).

(function(){ 
    var originalRemoveClassMethod = jQuery.fn.removeClass; 

    jQuery.fn.removeClass = function(){ 
     if (arguments[0] === 'modal-open' && jQuery('.modal.in').length > 1) { 
      return this; 
     } 
     var result = originalRemoveClassMethod.apply(this, arguments); 
     return result; 
    } 
})();

Quelle

2015-01-21 22:39:30

Wie von @Blazemonger erwähnt, [Bootstrap unterstützt explizit keine Stacking Modals] (http://getbootstrap.com/javascript/#modals) – cvrebert

$(document).ready(function() { 

$('.modal').on("hidden.bs.modal", function (e) { //fire on closing modal box 
     if ($('.modal:visible').length) { // check whether parent modal is opend after child modal close 
      $('body').addClass('modal-open'); // if open mean length is 1 then add a bootstrap css class to body of the page 
     } 
    }); 
}); 
//this code segment will activate parent modal dialog 
//after child modal box close then scroll problem will automatically fixed

Quelle

2015-09-22 09:11:34

IMO ist dies die beste Antwort. Hinzufügen der zusätzlichen CSS für Überlauf-y: Auto funktioniert auch, aber wie unten erwähnt, führt zu doppelten Bildlaufleisten. –

Dies liegt daran, wenn Sie eine modale schließen, den modal-open vom <body> Tag entfernt. Bootstrap unterstützt nicht mehrere Modale auf derselben Seite (mindestens bis BS3).

Ein Weg, um es Arbeit zu machen, ist das hidden.bs.modal Ereignis von BS ausgelöst zu verwenden, wenn ein modalen schließen, dann überprüfen, ob es anyother modal geöffnet ist, um die modal-open Klasse auf dem Körper zu zwingen.

// Hack to enable multiple modals by making sure the .modal-open class 
// is set to the <body> when there is at least one modal open left 
$('body').on('hidden.bs.modal', function() { 
    if($('.modal.in').length > 0) 
    { 
     $('body').addClass('modal-open'); 
    } 
});

Quelle

2016-05-04 15:37:14 Molkobain

Folgen https://github.com/nakupanda/bootstrap3-dialog/issues/70

.modal { overflow: auto !important; }

zu Ihrem css

Quelle

2016-12-17 04:09:21 truongpmcs

Sie sind fantastisch! – Deepal

Zunächst einmal, mehr offenen modals hinzufügen, werden nicht von Bootstrap unterstützt.Siehe hier: Bootstrap Modal docs

Mehrere offene Modale werden nicht unterstützt. Achten Sie darauf, kein Modal zu öffnen, während ein anderes noch sichtbar ist. Das Anzeigen von mehr als einem Modal auf einmal erfordert benutzerdefinierten Code.

Aber, wenn Sie müssen Sie das Bit von CSS in Ihrem benutzerdefinierten Sheet hinzufügen können, solange es enthalten ist nach die Haupt Bootstrap Sheet:

.modal { 
    overflow-y:auto; 
}

Quelle

2017-02-20 04:40:19 FastTrack

über JQuery hinzufügen die Klasse "Modal-offen" für den Körper. Ich nehme an, dass die Schriftrolle an allem außer dem Modal funktioniert.

Als Kommentar zu den vorherigen Antworten: Hinzufügen der Überlaufeigenschaft zum modalen (über CSS) hilft, aber dann haben Sie zwei Bildlaufleisten auf der Seite.

Quelle

2017-03-03 16:00:59

löste ich das Problem durch data-dismiss="modal" und das Hinzufügen von

setTimeout(function(){ $('#myModal2').modal('show') }, 500); 
$('#myModal1').modal('hide');

Entfernen

Hope it

hilft

Quelle

2017-05-11 00:36:48

Danke @Sunny Ich weiß nicht, warum andere Lösungen nicht für mich arbeiten, aber dieses ist definitiv funktioniert –

Bootstrap Modal Problem - Scrolling wird deaktiviert

Antwort

Verwandte Themen