Bootstrap: Öffnen Sie ein anderes Modal in Modal

95

Ich verwende diesen Code also, um ein anderes modales Fenster in einem aktuell geöffneten modalen Fenster zu öffnen:

<a onclick=\"$('#login').modal('hide');$('#lost').modal('show');\" href='#'>Click</a>

Was passiert ist, dass für etwa 500 ms die Bildlaufleiste dupliziert wird. Ich denke, weil das aktuelle Modal immer noch ausgeblendet ist. Es sieht jedoch sehr ungleichmäßig und stotternd aus.

Ich würde mich über Vorschläge zur Lösung dieses Problems freuen.

Ist es auch unprofessionell, dies in einem Onclick-Event aufzubauen?

Ich arbeite mit der Bootstrap-Version 3.0.

Bearbeiten: Ich denke, es ist notwendig, die Zeit zum Ausblenden eines Modals zu verkürzen. Wie ist das möglich?

javascript jquery twitter-bootstrap modal-dialog twitter-bootstrap-3 AlexioVay
quelle

3

Ein funktionierendes Beispiel finden Sie unter bootply.com/lvKQA2AM28

CrandellWS

86

data-dismiss Lässt die aktuelle modale Fensterkraft schließen

data-toggleöffnet ein neues Modal mit dem hrefInhalt darin

<a data-dismiss="modal" data-toggle="modal" href="#lost">Click</a>

oder

<a data-dismiss="modal" onclick="call the new div here">Click</a>

Lassen Sie uns wissen, ob es funktioniert.

Vielleicht möchten Sie sich auch in der Modaldokumentation umsehen

jayeshkv
quelle

Danke, es funktioniert und vermeidet die Verwendung von "onclick". Aber die Animation verdoppelt immer noch die Bildlaufleiste für eine Sekunde.

AlexioVay

@ user2829128 das ist was data-dismissmacht. Es schließt das aktuelle Fenster und öffnet ein neues. Können Sie Ihren Code in bootplyoder posten jsfiddle?

Jayeshkv

14

Das Scrollen würde beim zweiten Modal nicht funktionieren, wenn die Höhe lang ist.

Giraldi

Gleiches hier mit Bootstrap v4. Wenn ich auf die Schaltfläche auf dem ersten Mondal klicke, wird ein anderes Modal geöffnet, das zweite Modal wird mit einer Schriftrolle des Körpers angezeigt. Die Probleme sind in der Klasse .modal-offen für den Körper. Es wird entfernt, wenn wir klicken und nicht erneut hinzufügen.

fdrv

7

.modal { overflow-y: auto }löst das BS4-Bildlaufproblem.

Riki137

84

Meine Lösung schließt das untere Modal nicht, sondern stapelt sich wirklich darauf. Das Bildlaufverhalten bleibt korrekt erhalten. In Bootstrap 3 getestet. Damit Modals wie erwartet gestapelt werden können, müssen sie in Ihrem HTML-Markup vom niedrigsten zum höchsten geordnet sein.

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

Erweitern Sie das Snippet

UPDATE: Wenn Sie Modals gestapelt haben, werden alle Hintergründe unter dem untersten Modal angezeigt. Sie können dies beheben, indem Sie das folgende CSS hinzufügen:

.modal-backdrop {
    visibility: hidden !important;
}
.modal.in {
    background-color: rgba(0,0,0,0.5);
}

Dadurch wird ein modaler Hintergrund unterhalb des obersten sichtbaren Modals angezeigt. Auf diese Weise werden Ihre unteren Modalitäten darunter grau.

H Hund
quelle

2

Elemente später im Seiten-Markup haben von Natur aus einen höheren Z-Index und werden über Elementen gestapelt, die zuvor im Markup angezeigt wurden. Es sei denn, Sie legen einen expliziten Z-Index fest.

H Hund

1

@H Hund: genau das, was ich brauchte :) funktioniert perfekt. Vielen Dank!

Tobias Koller

2

Wirklich legendär !! Ich drehte mich um, wenn jemand vorschlug, ein Plugin für genau dieses zu verwenden ... wollte nur eine einfache Lösung für ein einfaches Problem haben und los geht's ... Prost!

Fr0zenFyr

2

Vielen Dank für Ihre Hilfe. Ihre Lösung wurde mein Problem gelöst, wenn ich zwei Modale gleichzeitig benutze !!!!!

Levon

3

Javascript funktionierte für Bootstrap 4, CSS jedoch nicht. Stattdessen habe ich den Hintergrund ausgeblendet und dann .modal: after {content: "" hinzugefügt; Bildschirmsperre; Hintergrund: rgba (0,0,0, 0,5); Position: fest; oben: 0; unten: 0; Breite: 100%; Z-Index: -1; }

Jason G.

28

Um ein anderes modales Fenster in einem aktuell geöffneten modalen Fenster zu öffnen,
Sie bootstrap-modal verwenden

Bootstrap-modales DEMO

suhailvs
quelle

Mit diesem Bootstrap-Modal wird der Hintergrundinhalt nach rechts verschoben.

Brian

@Brian - siehe hier: stackoverflow.com/questions/46339063/…

lfkwtz

18

Versuche dies

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#test1">Open Modal 1 </button>



<div id="test1" class="modal fade" role="dialog" style="z-index: 1400;">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      
      <div class="modal-body">
      	<button type="button" class="btn btn-info btn-lg" data-toggle="modal"      data-target="#test2">Open Modal 2</button>
      	
      </div>      
    </div>
  </div>
</div>

<div id="test2" class="modal fade" role="dialog" style="z-index: 1600;">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      
      <div class="modal-body">
      	
        content
      	
      </div>      
    </div>
  </div>
</div>
  

</body>
</html>

Erweitern Sie das Snippet

Elon Gomes Vieira
quelle

1

scheitern für mich .. = (das Modal funktioniert, aber wenn das 1. Modal lang ist, erscheint eine Schriftrolle für das 1. Modal und wenn Sie das 2. Modal öffnen und schließen, funktioniert die erste

Modalrolle

Vielen Dank, es war eine große Hilfe :)

Daniel Muñoz

17

Sie können tatsächlich erkennen, wann das alte Modal geschlossen wird, indem Sie das hidden.bs.modalEreignis aufrufen :

    $('.yourButton').click(function(e){
        e.preventDefault();

        $('#yourFirstModal')
            .modal('hide')
            .on('hidden.bs.modal', function (e) {
                $('#yourSecondModal').modal('show');

                $(this).off('hidden.bs.modal'); // Remove the 'on' event binding
            });

    });

Für weitere Informationen: http://getbootstrap.com/javascript/#modals-events

Giraldi
quelle

16

Update für 2018 - Verwenden von Bootstrap 4

Ich fand, dass die meisten Antworten eine Menge unnötiger jQuery enthalten. Das Öffnen eines Modals von einem anderen Modal aus kann einfach mithilfe der von Bootstrap bereitgestellten Ereignisse erfolgen, z show.bs.modal. Möglicherweise möchten Sie auch, dass CSS die Hintergrundüberlagerungen verarbeitet. Hier sind die 3 offenen Modal aus anderen Szenarien ...

Modal von einem anderen Modal öffnen (1. Modal offen halten)

<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>

<div class="modal" id="myModal">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">Modal title</h4>    
              <button type="button" class="close" data-dismiss="modal">×</button>
            </div><div class="container"></div>
            <div class="modal-body">
              ...
              <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Open modal2</a>
            </div>
            <div class="modal-footer">
              <a href="#" data-dismiss="modal" class="btn">Close</a>
            </div>
          </div>
        </div>
</div>
<div class="modal" id="myModal2" data-backdrop="static">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">2nd Modal title</h4>
              <button type="button" class="close" data-dismiss="modal">×</button>
            </div><div class="container"></div>
            <div class="modal-body">
              ..
            </div>
            <div class="modal-footer">
              <a href="#" data-dismiss="modal" class="btn">Close</a>
              <a href="#" class="btn btn-primary">Save changes</a>
            </div>
          </div>
        </div>
</div>

Ein mögliches Problem in diesem Fall ist, dass der Hintergrund des 2. Modals das 1. Modal verbirgt. Um dies zu verhindern, machen Sie das 2. Modal data-backdrop="static"und fügen Sie etwas CSS hinzu, um die Z-Indizes der Hintergründe zu korrigieren ...

/* modal backdrop fix */
.modal:nth-of-type(even) {
    z-index: 1052 !important;
}
.modal-backdrop.show:nth-of-type(even) {
    z-index: 1051 !important;
}

https://www.codeply.com/go/NiFzSCukVl

Modal von einem anderen Modal öffnen (1. Modal schließen)

Dies ähnelt dem obigen Szenario, aber da wir das erste Modal schließen, wenn das zweite geöffnet wird, ist die CSS-Korrektur im Hintergrund nicht erforderlich. Eine einfache Funktion, die das show.bs.modalEreignis " 2. Modal" behandelt , schließt das 1. Modal.

$("#myModal2").on('show.bs.modal', function (e) {
    $("#myModal1").modal("hide");
});

https://www.codeply.com/go/ejaUJ4YANz

Modal in einem anderen Modal öffnen

Das letzte Szenario mit mehreren Modalitäten ist das Öffnen des 2. Modals innerhalb des 1. Modals. In diesem Fall wird das Markup für das 2. innerhalb des 1 platziert. Es wird kein zusätzliches CSS oder jQuery benötigt.

<div class="modal" id="myModal1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Modal title</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="container"></div>
            <div class="modal-body">
                ...
                <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal 2</a>
            </div>
            <div class="modal-footer">
                <a href="#" data-dismiss="modal" class="btn">Close</a>
            </div>
        </div>
    </div>

    <div class="modal" id="myModal2">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">2nd Modal title</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="container"></div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <a href="#" data-dismiss="modal" class="btn">Close</a>
                    <a href="#" class="btn btn-primary">Save changes</a>
                </div>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/iSbjqubiyn

Zim
quelle

In Bootstrap 4 funktioniert dies nicht. Wenn Sie das 2. Modal schließen, kann das 1. nicht mehr scrollen.

Justin

@Justin - Ich sehe kein bestimmtes Szenario, das dies demonstriert, und da das Scrollen außerhalb des Bereichs der ursprünglichen Frage liegt. Ich schlage vor, Sie suchen oder stellen eine andere Frage, die sich speziell auf das Bildlaufproblem bezieht.

Zim

Der n-te Typ hat bei mir nicht funktioniert, weil er nicht auf die Klasse abzielt. Ich habe es zum

.modal-backdrop.show + .modal.show {     z-index: 1052 !important; } .modal-backdrop.show + .modal.show + .modal-backdrop.show {     z-index: 1051 !important; }

Laufen gebracht

14

Modal in Modal:

$('.modal-child').on('show.bs.modal', function () {
    var modalParent = $(this).attr('data-modal-parent');
    $(modalParent).css('opacity', 0);
});
 
$('.modal-child').on('hidden.bs.modal', function () {
    var modalParent = $(this).attr('data-modal-parent');
    $(modalParent).css('opacity', 1);
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<a href="#myModal" role="button" class="btn btn-primary" data-toggle="modal">Modals in Modal</a>


<div id="myModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
             
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <a href="#myModal1" role="button" class="btn btn-primary" data-toggle="modal">Launch other modal 1</a>
                <a href="#myModal2" role="button" class="btn btn-primary" data-toggle="modal">Launch other modal 2</a>
            </div>

        </div>
    </div>
</div>

<div id="myModal1" class="modal modal-child" data-backdrop-limit="1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-modal-parent="#myModal">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header 1</h4>
            </div>
            <div class="modal-body">
                <p>Two modal body…1</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" data-dismiss="modal" aria-hidden="true">Cancel</button>
            </div>

        </div>
    </div>
</div>

<div id="myModal2" class="modal modal-child" data-backdrop-limit="1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-modal-parent="#myModal">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header 2</h4>
            </div>
            <div class="modal-body">
                <p>Modal body…2</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" data-dismiss="modal" aria-hidden="true">Cancel</button>
            </div>

        </div>
    </div>
</div>

Erweitern Sie das Snippet

RedDevil2015
quelle

scheitern für mich .. = (das Modal funktioniert, aber wenn das 1. Modal lang ist, erscheint eine Schriftrolle für das 1. Modal und wenn Sie das 2. Modal öffnen und schließen, funktioniert die erste

Modalrolle

Das obige Beispiel erzeugt Modal anstelle des ersten Modals, das weder oben noch oben ist (das erste ist nicht mehr sichtbar).

JackTheKnife

Sehr schöner Effekt.

Jorge B.

9

Arbeiten an einem Projekt mit vielen Modalen, die andere Modalitäten aufrufen, und einigen HTML-Leuten, die möglicherweise nicht wissen, wie sie es jedes Mal für jede Schaltfläche initiieren können. Kam zu einem ähnlichen Ergebnis wie @gmaggio, nachdem ich den langen Weg zuerst gegangen war.

EDIT: Unterstützt jetzt Modals, die über Javascript aufgerufen werden.

BEARBEITEN: Das Öffnen eines Bildlaufmodals von einem anderen Modal funktioniert jetzt.

$(document).on('show.bs.modal', function (event) {
    if (!event.relatedTarget) {
        $('.modal').not(event.target).modal('hide');
    };
    if ($(event.relatedTarget).parents('.modal').length > 0) {
        $(event.relatedTarget).parents('.modal').modal('hide');
    };
});

$(document).on('shown.bs.modal', function (event) {
    if ($('body').hasClass('modal-open') == false) {
        $('body').addClass('modal-open');
    };
});

Platzieren Sie einfach die Modal-Ruftaste wie gewohnt, und wenn sie innerhalb eines Modals aufgenommen wird, wird die aktuelle zuerst geschlossen, bevor die im Datenziel angegebene Taste geöffnet wird. Beachten Sie, dassrelatedTarget dies von Bootstrap bereitgestellt wird.

Ich habe auch Folgendes hinzugefügt, um das Ausbleichen ein wenig zu glätten: Ich bin mir jedoch sicher, dass noch mehr getan werden kann.

.modal-backdrop.fade + .modal-backdrop.fade {
    transition: opacity 0.40s linear 0s;
}

Ren
quelle

Nicht 100% Ihr Problem, aber der gezeigte.bs.modal-Haken ist ein bisschen praktisch. Die Verwaltung der Klasse body.modal-open scheint in BS v.3.3.5 fehlerhaft zu sein. Nach dem Schließen eines Modals und dem Öffnen eines anderen fehlt sie, und daher wird der Hintergrund anstelle des (zweiten) Modals gescrollt. Ihr Hook kann dieses Verhalten beheben.

Manuel Arwed Schmidt

7

Laut Twitter-Dokumenten ist benutzerdefinierter Code erforderlich ...

Dies funktioniert ohne zusätzliches JavaScript. Benutzerdefiniertes CSS wird jedoch dringend empfohlen ...

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalOneModal">
      Launch demo modal
    </button> 
            <!-- Modal -->
            <div class="modal fade bg-info" id="modalOneModal" tabindex="-1" role="dialog" aria-labelledby="modalOneLabel" aria-hidden="true">
    
              <div class="modal-dialog">
          
                <div class="modal-content  bg-info">
                  <div class="modal-header btn-info">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="modalOneLabel">modalOne</h4>
                  </div>
                  <div id="thismodalOne" class="modal-body bg-info">
                
                
              <!-- Button trigger modal -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#twoModalsExample">
      Launch demo modal
    </button>
             
                    <div class="modal fade bg-info" id="twoModalsExample" style="overflow:auto" tabindex="-1" role="dialog" aria-hidden="true">
                <h3>EXAMPLE</h3>
            </div>
                  </div>
                  <div class="modal-footer btn-info" id="woModalFoot">
                    <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
    <!-- End Form Modals -->

Erweitern Sie das Snippet

CrandellWS
quelle

1

Hier ist ein weiteres Beispiel mit dem 2. Modal richtig formatiert bootply.com/qRsvPSrcO5

Zim

1

@Skelly den Z-Index wie im CSS zu ändern ist eine gute Idee ...z-index: 1080 !important;

CrandellWS

4

Wenn Sie das 2. Modal öffnen und nach draußen klicken, wird es fehlerhaft. (Chrome, spätestens)

Martin Braun

Vielleicht irre ich mich, aber ich glaube, die Dokumente sagen, dass man kein Modal in ein Modal einfügen soll, was nicht verwunderlich ist

CrandellWS

7

Für Bootstrap 4 habe ich Folgendes verwendet, um die Antwort von @ helloroy zu erweitern: -

var modal_lv = 0 ;
$('body').on('shown.bs.modal', function(e) {
    if ( modal_lv > 0 )
    {
        $('.modal-backdrop:last').css('zIndex',1050+modal_lv) ;
        $(e.target).css('zIndex',1051+modal_lv) ;
    }
    modal_lv++ ;
}).on('hidden.bs.modal', function() {
    if ( modal_lv > 0 )
        modal_lv-- ;
});

Der Vorteil des oben Gesagten ist, dass es keine Wirkung hat, wenn es nur ein Modal gibt, sondern nur für Vielfache. Zweitens delegiert es die Handhabung an die Stelle, um sicherzustellen, dass künftige Modalitäten, die derzeit nicht generiert werden, weiterhin berücksichtigt werden.

Aktualisieren

Der Wechsel zu einer kombinierten js / css-Lösung verbessert das Erscheinungsbild - die Überblendungsanimation funktioniert weiterhin im Hintergrund. -

var modal_lv = 0 ;
$('body').on('show.bs.modal', function(e) {
    if ( modal_lv > 0 )
        $(e.target).css('zIndex',1051+modal_lv) ;
    modal_lv++ ;
}).on('hidden.bs.modal', function() {
    if ( modal_lv > 0 )
        modal_lv-- ;
});

kombiniert mit dem folgenden CSS; -

.modal-backdrop ~ .modal-backdrop
{
    z-index : 1051 ;
}
.modal-backdrop ~ .modal-backdrop ~ .modal-backdrop
{
    z-index : 1052 ;
}
.modal-backdrop ~ .modal-backdrop ~ .modal-backdrop ~ .modal-backdrop
{
    z-index : 1053 ;
}

Dies wird Modale verarbeiten, die bis zu 4 tief verschachtelt sind, was mehr ist als ich brauche.

Smartbloke
quelle

In Bootstrap 4 funktioniert dies nicht. Wenn Sie das 2. Modal schließen, kann das 1. nicht mehr scrollen.

Justin

4

Versuche dies:

// Hide the login modal
$('#login').modal('hide');

// Show the next modal after the fade effect is finished
setTimeout(function(){ $('#lost').modal('show'); }, 500);

Dieser einfache Hack funktioniert bei mir.

Christian
quelle

4

Für jemanden, der Bootstrap 4 verwendet https://jsfiddle.net/helloroy/tmm9juoh/

var modal_lv = 0;
$('.modal').on('shown.bs.modal', function (e) {
    $('.modal-backdrop:last').css('zIndex',1051+modal_lv);
    $(e.currentTarget).css('zIndex',1052+modal_lv);
    modal_lv++
});

$('.modal').on('hidden.bs.modal', function (e) {
    modal_lv--
});

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-a">
  Launch demo modal a
</button>

<div class="modal fade" id="modal-a" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-b">
  Launch another demo modal b
</button>
<p class="my-3">
Not good for fade In.
</p>
<p class="my-3">
who help to improve?
</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modal-b" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-c">
  Launch another demo modal c
</button>
<p class="my-3">
But good enough for static modal
</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


<div class="modal" id="modal-c" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
<p class="my-3">That's all.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Erweitern Sie das Snippet

Helloroy
quelle

Das ist großartig, das einzige Problem ist, das Wiederauftauchen der Bildlaufleiste zu verhindern, wenn das oberste Modal geschlossen ist

HyperActive

2

Ich hatte auch einige Probleme mit meinen scrollbaren Modalen, also habe ich so etwas gemacht:

  $('.modal').on('shown.bs.modal', function () {
    $('body').addClass('modal-open');
    // BS adds some padding-right to acomodate the scrollbar at right
    $('body').removeAttr('style');
  })

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

Es wird für jedes Modal innerhalb eines Modals dienen , das erscheint. Beachten Sie, dass der erste geschlossen ist, damit der zweite angezeigt werden kann. Keine Änderungen in der Bootstrap-Struktur.

Teefars
quelle

2

Ich bin alle zusammen einen anderen Weg gegangen und habe beschlossen, sie zu "entnisten". Vielleicht findet das jemand praktisch ...

var $m1 = $('#Modal1');
var $innermodal = $m1.find(".modal");     //get reference to nested modal
$m1.after($innermodal);                  // snatch it out of inner modal and put it after.

Dylan Hayes
quelle

Vielen Dank

2

Mein Code funktioniert gut mit Datenentlassung.

<li class="step1">
    <a href="#" class="button-popup" data-dismiss="modal" data-toggle="modal" data-target="#lightbox1">
        <p class="text-label">Step 1</p>
        <p class="text-text">Plan your Regime</p>
    </a>

</li>
<li class="step2">
    <a href="#" class="button-popup" data-dismiss="modal" data-toggle="modal" data-target="#lightbox2">
        <p class="text-label">Step 2</p>
        <p class="text-text">Plan your menu</p>
    </a>
</li>
<li class="step3 active">
    <a href="#" class="button-popup" data-toggle="modal" data-dismiss="modal" data-target="#lightbox3">
        <p class="text-label">Step 3</p>
        <p class="text-text">This Step is Undone.</p>
    </a>
</li>

user3675926
quelle

1

Schließen Sie das erste Bootstrap-Modal und öffnen Sie das neue Modal dynamisch.

$('#Modal_One').modal('hide');
setTimeout(function () {
  $('#Modal_New').modal({
    backdrop: 'dynamic',
    keyboard: true
  });
}, 500);

Abhishek
quelle

1

Warum nicht einfach den Inhalt des Modalkörpers ändern?

    window.switchContent = function(myFile){
        $('.modal-body').load(myFile);
    };

Im Modal einfach einen Link oder eine Schaltfläche einfügen

    <a href="Javascript: switchContent('myFile.html'); return false;">
     click here to load another file</a>

Wenn Sie nur zwischen 2 Modalitäten wechseln möchten:

    window.switchModal = function(){
        $('#myModal-1').modal('hide');
        setTimeout(function(){ $('#myModal-2').modal(); }, 500);
        // the setTimeout avoid all problems with scrollbars
    };

Im Modal einfach einen Link oder eine Schaltfläche einfügen

    <a href="Javascript: switchModal(); return false;">
     click here to switch to the second modal</a>

Carlo
quelle

Das ist eher eine UX-bezogene Antwort, da ich diese brauchte, um eine Fehlermeldung bezüglich Modal # 1 anzuzeigen. Also hatte Modal # 2 die Fehlermeldung. Aber es ist schon lange her, seit ich diese Frage gestellt habe und ich mache solche Dinge jetzt anders.

AlexioVay

0

Versuche dies:

$('.modal').on('hidden.bs.modal', function () {
//If there are any visible
  if($(".modal:visible").length > 0) {
      //Slap the class on it (wait a moment for things to settle)
      setTimeout(function() {
          $('body').addClass('modal-open');
      },100)
  }
});

Rakesh Vadnal
quelle

0

Die Antwort von H Dog ist großartig, aber dieser Ansatz hat mir in Internet Explorer 11 tatsächlich ein modales Flimmern beschert. Bootstrap blendet zuerst das Modal aus und entfernt die Klasse "Modal-Open". Anschließend fügen wir (unter Verwendung der H Dogs-Lösung) das hinzu 'Modal-Open'-Klasse wieder. Ich vermute, dass dies irgendwie das Flackern verursacht, das ich gesehen habe, möglicherweise aufgrund eines langsamen HTML / CSS-Renderings.

Eine andere Lösung besteht darin, zu verhindern, dass Bootstrap die 'modal-open'-Klasse überhaupt aus dem body-Element entfernt. Mit Bootstrap 3.3.7 funktioniert diese Überschreibung der internen Funktion hideModal perfekt für mich.

$.fn.modal.Constructor.prototype.hideModal = function () {
    var that = this
    this.$element.hide()
    this.backdrop(function () {
        if ($(".modal:visible").length === 0) {
            that.$body.removeClass('modal-open')
        }
        that.resetAdjustments()
        that.resetScrollbar()
        that.$element.trigger('hidden.bs.modal')
    })
}

Bei dieser Überschreibung wird die Klasse "Modal-Open" nur entfernt, wenn keine sichtbaren Modalitäten auf dem Bildschirm angezeigt werden. Und Sie verhindern, dass ein Frame eine Klasse entfernt und dem Body-Element hinzufügt.

Fügen Sie einfach die Überschreibung hinzu, nachdem der Bootstrap geladen wurde.

Adam
quelle

-4

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

Alex Sh.
quelle

Bootstrap: Öffnen Sie ein anderes Modal in Modal

Antworten: