Bootstrap modal: Strom schließen, neu öffnen

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.

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.

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

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>

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;
});

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");
      }
    });
  });
});

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");
    });
});

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/

data-dismiss="modal" 

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

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").

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;}
    }
  });
});

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.

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

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.

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

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>

$("#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})});

Ich benutze einen anderen Weg:

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

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.

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.

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...
}); 

Versuche dies

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

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
    }

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

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();

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

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');
    });
}

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!