Bootstrap modal: Strom schließen, neu öffnen

84

Ich habe eine Weile gesucht, aber ich kann keine Lösung dafür finden. Ich möchte folgendes:

  • Öffnen Sie eine URL in einem Bootstrap-Modal. Ich habe diese Arbeit natürlich. Der Inhalt wird also dynamisch geladen.
  • Wenn ein Benutzer eine Schaltfläche in diesem Modal drückt, soll das aktuelle Modal ausgeblendet werden, und unmittelbar danach soll ein neues Modal mit der neuen URL (auf die der Benutzer geklickt hat) geöffnet werden. Dieser Inhalt des 2. Modals wird ebenfalls dynamisch geladen.
  • Wenn der Benutzer dann das 2. Modal schließt, muss das erste Modal wieder zurückkehren.

Ich habe tagelang darauf gestarrt, hoffe jemand kann mir helfen.

Danke im Voraus.

Eelco Luurtsema
quelle
Bootstrap 2 oder 3? Können Sie eine JS-Geige für das einrichten, was Sie haben?
Tim Wasson
Bootstrap 2.3.1. Ich glaube, ich kann wegen des dynamischen Inhalts keine JS-Geige
einrichten

Antworten:

57

Ohne einen bestimmten Code zu sehen, ist es schwierig, Ihnen eine genaue Antwort zu geben. In den Bootstrap-Dokumenten können Sie das Modal jedoch folgendermaßen ausblenden:

$('#myModal').modal('hide')

Zeigen Sie dann ein anderes Modal, sobald es ausgeblendet ist:

$('#myModal').on('hidden.bs.modal', function () {
  // Load up a new modal...
  $('#myModalNew').modal('show')
})

Sie müssen einen Weg finden, um die URL in das neue modale Fenster zu verschieben, aber ich würde annehmen, dass dies trivial wäre. Ohne den Code zu sehen, ist es schwierig, ein Beispiel dafür zu geben.

Tim Wasson
quelle
Seltsamerweise funktionierte es mit Bootstrap 3. Ich glaube, mein Code hatte einen Konflikt mit den Bootstrap-Tooltips, und das wurde in Version 3 geändert. Danke
Eelco Luurtsema
8
Auf Bootstrap v3 ist das Ereignis 'hidden.bs.modal'
coure2011
3
Eine Lösung mit Datenentlassung ist viel eleganter (mindestens 2015) und erfordert kein Nicht-Bootstrap-Javascript.
Manuel Arwed Schmidt
Thanks @ coure2011
Capcom
4
data-toggle = "modal" data-target = "# targetmodal" data-entlassen = "modal" Dies funktioniert einwandfrei.
Sushan
79

Ich weiß, dass dies eine späte Antwort ist, aber es könnte nützlich sein. Hier ist ein richtiger und sauberer Weg, um dies zu erreichen, wie oben bei @ karima erwähnt. Sie können tatsächlich zwei Funktionen gleichzeitig auslösen. triggerunddismiss das Modal.

HTML Markup;

<!-- Button trigger modal -->
<ANY data-toggle="modal" data-target="TARGET">...</ANY>

<div class="modal fade" id="SELECTOR" tabindex="-1">
  <div class="modal-dialog">
   <div class="modal-content">
    <div class="modal-body"> ... </div>
     <div class="modal-footer">           <!--  -->  <!--            -->
      <ANY data-toggle="modal" data-target="TARGET-2" data-dismiss="modal">...</ANY>
     </div>
   </div>
  </div>
</div>

Demo

Mahmoud
quelle
25
Kein Bueno, da Sie feststellen werden, dass das Scrollen der Seite nach dem Öffnen des ersten Modals ordnungsgemäß funktioniert. Wenn Sie jedoch ein anderes Modal von einem vorhandenen Modal aus starten, wird der Bildlauf in den Hintergrund verschoben. Dies ist ein großes Problem, wenn Sie ein Modal haben, das gescrollt werden muss (z. B. wenn Sie es auf einem mobilen Gerät anzeigen).
Schwerkraftgrab
Ich habe ein sehr ähnliches Problem, aber im Winkel. Wissen Sie, wie Sie dasselbe tun, was Sie hier getan haben, aber in einem Winkelregler und unter Verwendung der Eigenschaften templateUrlund windowClass?
John R
1
Danke - funktioniert für mich. Das Hauptproblem für mich war, dass ich den data-dismiss="modal"Button verpasst habe
FDisk
@ Mahmoud, hey, gibt es eine Möglichkeit, den vibrierenden Effekt beim Laden des zweiten Modals von einem zu vermeiden? und wie vermeide ich die zusätzliche Schriftrolle?
Arun Xavier
Dies ist ein Browserproblem, das in Google Chrome beim Ändern von Modal, Schließen oder Öffnen "erschüttert" wird. versuchen Sie -webkit-backface-visibility: hidden;auf HTML, Körper CSS
Máxima Alekz
34

Es ist nicht genau die Antwort, aber es ist nützlich, wenn Sie das aktuelle Modal schließen und ein neues Modal öffnen möchten.

Im HTML-Code auf derselben Schaltfläche können Sie das aktuelle Modal mit Datenentlassung schließen und ein neues Modal direkt mit Datenziel öffnen:

<button class="btn btn-success" 
data-toggle="modal" 
data-target="#modalRegistration" 
data-dismiss="modal">Register</button>
Karima Rafes
quelle
4
Vielen Dank für diese Idee
Jitendra Vyas
2
Das Problem dabei data-dismiss="modal"ist, dass Ihr Inhalt nach links verschoben wird, wenn Sie das zweite Modal schließen.
Kuldeep Dangi
1
hmmmm. Diese Methode funktioniert bei mir nicht. Der erste geht weg, aber der zweite erscheint nie
KevinDeus
Ich bin mir nicht sicher, welches Problem du
hattest
Hat wunderbar für mich funktioniert! Und sehr einfache Lösung. Vielen Dank!
Guero64
10

Das Problem dabei data-dismiss="modal"ist, dass Ihr Inhalt nach links verschoben wird

Ich bin zu teilen , was für mich gearbeitet, war Problem statment Öffnung pop1vonpop2

JS CODE

var showPopup2 = false;
$('#popup1').on('hidden.bs.modal', function () {
    if (showPopup2) {
        $('#popup2').modal('show');
        showPopup2 = false;
    }
});

$("#popup2").click(function() {
    $('#popup1').modal('hide');
    showPopup2 = true;
});
Kuldeep Dangi
quelle
2
so eine einfache Lösung :)
Geoff
9

Ich benutze diese Methode:

$(function() {
  return $(".modal").on("show.bs.modal", function() {
    var curModal;
    curModal = this;
    $(".modal").each(function() {
      if (this !== curModal) {
        $(this).modal("hide");
      }
    });
  });
});
Josh Dean
quelle
4

Mit dem folgenden Code können Sie das erste Modal ausblenden und das zweite Modal sofort öffnen. Mit derselben Strategie können Sie das zweite Modal ausblenden und das erste anzeigen.

$("#buttonId").on("click", function(){
    $("#currentModalId").modal("hide");
    $("#currentModalId").on("hidden.bs.modal",function(){
    $("#newModalId").modal("show");
    });
});
Husnain Shabbir
quelle
Behebt auch das Scroll-Problem
Richard Housham
4

Sie müssen dem Link oder der Schaltfläche, über die Sie diese Funktionalität hinzufügen möchten, folgendes Attribut hinzufügen:

 data-dismiss="modal" data-toggle="modal" id="forgotPassword" data-target="#ModalForgotPassword"

Ein detaillierter Blog: http://sforsuresh.in/bootstrap-modal-window-close-current-open-new-modal/

Suresh Kamrushi
quelle
Funktioniert perfekt mit Bootstrap 4.
Heather92065
4
data-dismiss="modal" 

Es wird verwendet, um das vorhandene geöffnete Modell zu schließen. Sie können es auf das neue Modell einstellen

M. Lak
quelle
Ich bin nicht der Meinung, dass dies auf allen Versionen von Bootstrap funktioniert. Das Entlassungsmodal in meinem Fall bewirkt, dass das Modal geschlossen und das neue geöffnet wird, aber es hat auch die Modalklasse aus dem Körper entfernt, und dann kann ich das Modal nicht nach unten scrollen.
Bodokh
2

Mit BootStrap 3 können Sie Folgendes versuchen:

var visible_modal = jQuery('.modal.in').attr('id'); // modalID or undefined
if (visible_modal) { // modal is active
    jQuery('#' + visible_modal).modal('hide'); // close modal
}

Getestet für die Arbeit mit: http://getbootstrap.com/javascript/#modals (klicken Sie zuerst auf "Demo Modal starten").

Alvin K.
quelle
3
Ich glaube nicht, dass du das .attrbisschen brauchst, oder? Würde das nicht genauso gut funktionieren? var visible_modal = jQuery('.modal.in'); if (visible_modal) { visible_modal.modal('hide'); }.
Paul D. Waite
2

Ich habe genau das gleiche Problem und meine Lösung ist nur, wenn der modale Dialog das Attribut [role = "dialog"] hat:

/*
* Find and Close current "display:block" dialog,
* if another data-toggle=modal is clicked
*/
jQuery(document).on('click','[data-toggle*=modal]',function(){
  jQuery('[role*=dialog]').each(function(){
    switch(jQuery(this).css('display')){
      case('block'):{jQuery('#'+jQuery(this).attr('id')).modal('hide'); break;}
    }
  });
});
Jonny
quelle
1
jsfiddle.net/e6x4hq9h/7 Ich habe es versucht und es funktioniert, wenn ich das Modal zum ersten Mal öffne, aber nicht später.
Joshua Dickerson
2

Ich hatte das gleiche Problem wie @Gravity Grave, bei dem das Scrollen bei Verwendung nicht funktioniert

data-toggle="modal" data-target="TARGET-2" 

in Verbindung mit

data-dismiss="modal"

Der Bildlauf funktioniert nicht richtig und kehrt zum Scrollen der Seite und nicht des Modals zurück. Dies ist darauf zurückzuführen, dass beim Entfernen der Daten die modal-open-Klasse aus dem Tag entfernt wurde.

Am Ende bestand meine Lösung darin, das HTML der inneren Komponente auf das Modal zu setzen und den Text mit CSS ein- und auszublenden.

Jamadan
quelle
2

Wie oben erwähnt Im HTML-Code auf derselben Schaltfläche können Sie das aktuelle Modal mit Datenentlassung schließen und ein neues Modal direkt mit Datenziel öffnen:

<button class="btn btn-success" data-toggle="modal" data-target="#modalRegistration" data-dismiss="modal">Register</button>

Dies führt jedoch dazu, dass die Bildlaufleiste verschwindet und Sie feststellen, dass das zweite Modal länger war als das erste

Die Lösung besteht also darin, dem modalen Inline-Stil den folgenden Stil hinzuzufügen:

Style = "overflow-y : scroll ; "

anouar es-sayid
quelle
1

Klickfunktion verwenden:

$('.btn-editUser').on('click', function(){
    $('#viewUser').modal('hide'); // hides modal with id viewUser 
    $('#editUser').modal('show'); // display modal with id editUser
});

Kopf hoch:

Stellen Sie sicher, dass das, das Sie anzeigen möchten, ein unabhängiges Modal ist.

claudios
quelle
1

Im ersten Modal:

Ersetzen Sie den modalen Entlassungslink in der Fußzeile durch den unten stehenden Link.

<div class="modal-footer">
      <a href="#"  data-dismiss="modal" class="btn btn-primary" data-toggle="modal" data-target="#second_model_id">Close</a>
</div>

Im zweiten Modal:

Dann ersetzt das zweite Modal das obere Div durch das untere Div-Tag.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="add text for disabled people here" aria-hidden="true" id="second_model_id">
Taimoor Changaiz
quelle
1

Hatte das gleiche Problem, das hier, falls jemand in der Zukunft stößt auf dieses Schreiben und hat Probleme mit mehreren Modalverben, die haben haben Scrollen als auch (ich bin mit Bootstrap 3.3.7)

Was ich getan habe, ist ein Knopf wie dieser in meinem ersten Modal:

<div id="FirstId" data-dismiss="modal" data-toggle="modal" data-target="#YourModalId_2">Open modal</div>

Es wird das erste ausblenden und dann das zweite anzeigen, und im zweiten Modal hätte ich eine Schaltfläche zum Schließen, die so aussehen würde:

<div id="SecondId" data-dismiss="modal" data-toggle="modal" data-target="#YourModalId_1">Close</div>

Dadurch wird das zweite Modal geschlossen und das erste geöffnet. Damit das Scrollen funktioniert, habe ich meiner CSS-Datei folgende Zeile hinzugefügt:

.modal {
overflow: auto !important;
}

PS: Nur eine Randnotiz, Sie müssen diese Modalitäten separat haben, das Moll-Modal kann nicht im ersten verschachtelt werden, da Sie das erste ausblenden

Hier ist das vollständige Beispiel basierend auf dem modalen Bootstrap-Beispiel:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal 1 -->
<div class="modal fade" id="exampleModal" 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">
        Add lorem ipsum here
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#exampleModal2">
          Open second modal
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Modal 2 -->
<div class="modal fade" id="exampleModal2" 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">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal"  data-toggle="modal" data-target="#exampleModal">Close</button>
      </div>
    </div>
  </div>
</div>
Renet
quelle
0
$("#buttonid").click(function(){
    $('#modal_id_you_want_to_hid').modal('hide')
});

// same as above button id
$("#buttonid").click(function(){
$('#Modal_id_You_Want_to_Show').modal({backdrop: 'static', keyboard: false})});
Ajay Kabariya
quelle
$ ("# buttonid"). click (function () {$ ('# modal_id_you_want_to_hid'). modal ('hide')}); // wie oben Schaltflächen-ID $ ("# buttonid"). click (function () {$ ('# Modal_id_You_Want_to_Show'). modal ({Hintergrund: 'static', Tastatur: false})})
Ajay Kabariya
0

Ich benutze einen anderen Weg:

$('#showModal').on('hidden.bs.modal', function() {
        $('#easyModal').on('shown.bs.modal', function() {
            $('body').addClass('modal-open');
        });
    });
Алексей Морозов
quelle
0

Wenn Sie das zuvor geöffnete Modal schließen möchten, während Sie das neue Modal öffnen, müssen Sie dies über Javascript / jquery tun, indem Sie zuerst das aktuell geöffnete Modal schließen und dann eine Zeitüberschreitung von 400 ms angeben, damit es das neue Modal schließen und dann wie unten beschrieben öffnen kann ::

$('#currentModal').modal('hide');

setTimeout(function() {
       //your code to be executed after 200 msecond 
       $('#newModal').modal({
           backdrop: 'static'//to disable click close
   })
}, 400);//delay in miliseconds##1000=1second

Wenn Sie versuchen, dies mit dem zu tun, tritt das data-dismiss="modal"Bildlaufproblem auf, wie von @gravity und @kuldeep in den Kommentaren erwähnt.

shivgre
quelle
0

Keine der Antworten hat mir geholfen, da ich etwas erreichen wollte, das genau dem entspricht, was in der Frage erwähnt wurde.

Ich habe zu diesem Zweck ein jQuery-Plugin erstellt.

/*
 * Raj: This file is responsible to display the modals in a stacked fashion. Example:
 * 1. User displays modal A
 * 2. User now wants to display modal B -> This will not work by default if a modal is already displayed
 * 3. User dismisses modal B
 * 4. Modal A should now be displayed automatically -> This does not happen all by itself 
 * 
 * Trying to solve problem for: http://stackoverflow.com/questions/18253972/bootstrap-modal-close-current-open-new
 * 
 */

var StackedModalNamespace = StackedModalNamespace || (function() {
    var _modalObjectsStack = [];
    return {
        modalStack: function() {
            return _modalObjectsStack;
        },
        currentTop: function() {
            var topModal = null;
            if (StackedModalNamespace.modalStack().length) {
                topModal = StackedModalNamespace.modalStack()[StackedModalNamespace.modalStack().length-1];
            }
            return topModal;
        }
    };
}());

// http://stackoverflow.com/a/13992290/260665 difference between $.fn.extend and $.extend
jQuery.fn.extend({
    // https://api.jquery.com/jquery.fn.extend/
    showStackedModal: function() {
        var topModal = StackedModalNamespace.currentTop();
        StackedModalNamespace.modalStack().push(this);
        this.off('hidden.bs.modal').on('hidden.bs.modal', function(){   // Subscription to the hide event
            var currentTop = StackedModalNamespace.currentTop();
            if ($(this).is(currentTop)) {
                // 4. Unwinding - If user has dismissed the top most modal we need to remove it form the stack and display the now new top modal (which happens in point 3 below)
                StackedModalNamespace.modalStack().pop();
            }
            var newTop = StackedModalNamespace.currentTop();
            if (newTop) {
                // 3. Display the new top modal (since the existing modal would have been hidden by point 2 now)
                newTop.modal('show');
            }
        });
        if (topModal) {
            // 2. If some modal is displayed, lets hide it
            topModal.modal('hide');
        } else {
            // 1. If no modal is displayed, just display the modal
            this.modal('show');
        }
    },
});

Working Fiddle als Referenz, JSFiddle: https://jsfiddle.net/gumdal/67hzgp5c/

Sie müssen nur mit meiner neuen API " showStackedModal()" anstatt nur " modal('show')" aufrufen . Der Teil zum Ausblenden kann immer noch derselbe sein wie zuvor, und der gestapelte Ansatz zum Ein- und Ausblenden der Modalitäten wird automatisch berücksichtigt.

Raj Pawan Gumdal
quelle
0

Einfache und elegante Lösung für BootStrap 3.x. Das gleiche Modal kann auf diese Weise wiederverwendet werden.

$("#myModal").modal("hide");
$('#myModal').on('hidden.bs.modal', function (e) {
   $("#myModal").html(data);
   $("#myModal").modal();
   // do something more...
}); 
Avnish alok
quelle
0

Versuche dies

    $('#model1').modal('hide');
setTimeout(function(){
    $('#modal2').modal('show');
},400);
Kerolen Monsef
quelle
0

Wenn Sie mdb verwenden, verwenden Sie diesen Code

    var visible_modal = $('.modal.show').attr('id'); // modalID or undefined
    if (visible_modal) { // modal is active
        $('#' + visible_modal).modal('hide'); // close modal
    }
Moein Masoudi
quelle
0
<div class="container">
  <h1>Bootstrap modal: close current, open new</h1>
  <p class="text-muted">
  A proper and clean way to get this done without addtional Javascript/jQuery. The main purpose of this demo is was to answer this 
  <a href="http://stackoverflow.com/questions/18253972/bootstrap-modal-close-current-open-new">question on stackoverflow</a>
  </p>
  <hr />

  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo-1">Launch Modal #1</button>
  <button type="button" class="btn btn-info"    data-toggle="modal" data-target="#demo-2">Launch Modal #2</button>
  <button type="button" class="btn btn-default" data-toggle="modal" data-target="#demo-3">Launch Modal #3</button>

  <!-- [ Modal #1 ] -->
  <div class="modal fade" id="demo-1" tabindex="-1">
    <div class="modal-dialog">
     <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
      <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 caps"><strong>Demo Modal #1</strong></h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Input Placeholder..." />
            <span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
          </div>
        </div>
      </div>
       <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">&times;</button>
            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#demo-2" data-dismiss="modal">Close current, Launch Modal #2</button>
            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#demo-3" data-dismiss="modal">Close current, Launch Modal #3</button>
        </div>
     </div>
    </div>
  </div>

  <!-- [ Modal #2 ] -->
  <div class="modal fade" id="demo-2" tabindex="-1">
    <div class="modal-dialog">
     <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
      <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 caps"><strong>Demo Modal #2</strong></h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Input Placeholder..." />
            <span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
          </div>
        </div>
      </div>
       <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">&times;</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo-1" data-dismiss="modal">Close current, Launch Modal #1</button>
            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#demo-3" data-dismiss="modal">Close current, Launch Modal #3</button>
        </div>
     </div>
    </div>
  </div>

  <!-- [ Modal #3 ] -->
  <div class="modal fade" id="demo-3" tabindex="-1">
    <div class="modal-dialog">
     <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
      <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 caps"><strong>Demo Modal #3</strong></h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Input Placeholder..." />
            <span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
          </div>
        </div>
      </div>
       <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">&times;</button>
            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#demo-1" data-dismiss="modal">Close current, Launch Modal #1</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo-2" data-dismiss="modal">Close current, Launch Modal #2</button>
        </div>
     </div>
    </div>
  </div>

  <hr />
  <h3 class="caps">Usage:</h3>
<pre class="prettyprint">&lt;!-- Button trigger modal --&gt;
&lt;ANY data-toggle="modal" data-target="TARGET"&gt;...&lt;/ANY&gt;

&lt;div class="modal fade" id="SELECTOR" tabindex="-1"&gt;
  &lt;div class="modal-dialog"&gt;
   &lt;div class="modal-content"&gt;
    &lt;div class="modal-body"&gt; ... &lt;/div&gt;
     &lt;div class="modal-footer"&gt;           &lt;!--  --&gt;  &lt;!--            --&gt;
      &lt;ANY data-toggle="modal" data-target="TARGET-2" data-dismiss="modal"&gt;...&lt;/ANY&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
</div> <!-- end .container -->

<hr />
<footer class="text-center"><a href="https://twitter.com/_elmahdim">@_elmahdim</a></footer>
<br />
<br />
Junaid Masood
quelle
0

Ich bin vielleicht etwas spät dran, aber ich glaube, ich habe eine funktionierende Lösung gefunden.

Erforderlich -

jQuery

Alle Modalitäten mit einer Schaltfläche zum Schließen / Entlassen, deren Attribute wie folgt festgelegt sind:

<button type="button" class="btn close_modal" data-toggle="modal" data-target="#Modal">Close</button>  

Bitte beachten Sie die Klasse close_modal , die zu den Klassen der Schaltfläche hinzugefügt wurde

Um nun alle vorhandenen Modalitäten zu schließen, rufen wir an

$(".close_modal").trigger("click");

Also, wo immer Sie ein Modal öffnen möchten

Fügen Sie einfach den obigen Code hinzu und alle offenen Modalitäten werden geschlossen.

Fügen Sie dann Ihren normalen Code hinzu, um das gewünschte Modal zu öffnen

$("#DesiredModal").modal();
Alpha
quelle
0

Modales Dialogfeld ausblenden.

Methode 1: Verwenden von Bootstrap.

$('.close').click(); 
$("#MyModal .close").click();
$('#myModalAlert').modal('hide');

Methode 2: Verwenden stopPropagation().

$("a.close").on("click", function(e) {
  $("#modal").modal("hide");
  e.stopPropagation();
});

Methode 3: Nach dem gezeigten Methodenaufruf.

$('#myModal').on('shown', function () {
  $('#myModal').modal('hide');
})

Methode 4: Verwenden von CSS.

this.display='block'; //set block CSS
this.display='none'; //set none CSS after close dialog
Bharathiraja
quelle
0

Dieser Code, Modal schließen geöffnet, öffnet das neue Modal, aber sofort wird neues Modal geschlossen.

$(nameClose).modal('hide');
$(nameOpen).modal('show');

Meine Lösung für das Öffnen neuer Modal nach dem Schließen anderer ist:

function swapModals(nameClose,nameOpen) {
    $(nameClose).modal('hide');
    $(nameClose).on('hidden.bs.modal', function () {
        console.log('Fired when hide event has finished!');
        $(nameOpen).modal('show');
    });
}
Adrian Garcia Sabate
quelle
0

Kopieren Sie einfach diesen Code und fügen Sie ihn ein. Sie können mit zwei Modalen experimentieren. Das zweite Modal ist nach dem Schließen des ersten geöffnet:

<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
</button>

<!-- The Modal -->
<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Modal Heading</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                Modal body..
            </div>

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

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



<!-- The Modal 2 -->
<div class="modal" id="myModal2">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Second modal</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                Modal body..
            </div>

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

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




<script>
    $('#myModal').on('hidden.bs.modal', function () {
        $('#myModal2').modal('show')
    })
</script>

Prost!

Adam Kozlowski
quelle