wake-up-neo.com

Bootstrap-Modal: Aktuelles schließen, neu öffnen

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

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

Ich habe das seit Tagen angestarrt und hoffe, jemand kann mir helfen.

Danke im Voraus.

66
Eelco Luurtsema

Ohne spezifischen Code zu sehen, ist es schwierig, Ihnen eine genaue Antwort zu geben. In den Bootstrap-Dokumenten können Sie das Modal jedoch wie folgt ausblenden: 

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

Dann zeigen Sie eine andere Modalität, sobald sie ausgeblendet ist:

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

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

39
Tim Wasson

Ich weiß, dass dies eine späte Antwort ist, aber es könnte nützlich sein. Hier ist ein geeigneter und sauberer Weg, dies zu erreichen, wie bei @ karima oben erwähnt. Sie können tatsächlich zwei Funktionen gleichzeitig auslösen. trigger und dismiss 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

64
Mahmoud

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.

In der HTML-Datei in derselben Schaltfläche können Sie das Schließen des aktuellen Modals mit dem Befehl "data -miss" anfordern und ein neues Modal direkt mit dem Datenziel öffnen:

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

Problem mit data-dismiss="modal" ist, dass der Inhalt nach links verschoben wird

Ich teile mit, was für mich funktioniert hat. Problemstatement öffnete pop1 von pop2

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

Ich verwende diese Methode:

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

Mit dem folgenden Code können Sie den ersten Modal ausblenden und sofort den zweiten Modal öffnen. Wenn Sie dieselbe Strategie verwenden, können Sie den zweiten Modal ausblenden und den ersten anzeigen. 

$("#buttonId").on("click", function(){
    $("#currentModalId").modal("hide");
    $("#currentModalId").on("hidden.bs.modal",function(){
    $("#newModalId").modal("show");
    });
});
3
husnain shabbir

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

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

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

3
Suresh Kamrushi

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

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 "Launch Demo Modal"). 

2
Alvin K.

Mit Klickfunktion:

$('.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 es sich bei dem von Ihnen gewünschten Modul um ein unabhängiges Modal handelt.

1
claudios
data-dismiss="modal" 

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

1
M. Lak

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

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

in Verbindung mit 

data-dismiss="modal"

Der Bildlauf funktioniert nicht ordnungsgemäß und es wird nicht mehr der modale, sondern die Seite angezeigt. Dies liegt daran, dass data-demiss die modal-open-Klasse aus dem Tag entfernt.

Meine Lösung am Ende war, das HTML der inneren Komponente im Modal zu setzen und css zu verwenden, um den Text ein-/auszublenden.

1
DarthJam

Keine der Antworten hat mir geholfen, da ich etwas erreichen wollte, das genau das gleiche ist, wie in der Frage erwähnt.

Ich habe ein jQuery-Plugin für diesen Zweck 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');
        }
    },
});

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

Sie müssen nur mit meiner neuen API "showStackedModal()" anstelle von "modal('show')" aufrufen. Der verdeckte Teil kann immer noch derselbe sein wie zuvor und der gestapelte Ansatz zum Anzeigen und Ausblenden der Modalen wird automatisch berücksichtigt.

0

In der ersten Modalität:

ersetzen Sie den modalen Link zum Verlassen in der Fußzeile durch einen nachstehenden 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 ersetzen Sie den zweiten Modal top div durch das 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">
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 />
0
Junaid Masood

Hatte das gleiche Problem, schreibe dies hier für den Fall, dass jemand in der Zukunft darüber stolpert und Probleme mit multiple modals hat, die scrollen müssen (Ich verwende Bootstrap 3.3.7)

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

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

Der erste wird ausgeblendet und dann der zweite angezeigt. In der zweiten Modalität hätte ich eine Schaltfläche zum Schließen, die folgendermaßen aussehen würde:

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

Das schließt also den zweiten Modal und öffnet den ersten und um scrolling work zu machen, füge ich meiner .css-Datei diese Zeile hinzu:

.modal {
overflow: auto !important;
}

PS: Nur eine Randbemerkung, du musst diese Modals separat haben, das Nebenmodal kann nicht in das erste geschachtelt werden, da das erste ausgeblendet wird

Hier also das vollständige Beispiel, das auf dem Bootstrap-Modal-Beispiel basiert:

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

Wenn Sie den zuvor geöffneten Modal schließen möchten, während Sie den neuen Modal öffnen, müssen Sie dies über Javascript/Jquery tun, indem Sie zunächst den aktuellen Open-Modal schließen und dann ein Timeout von 400 ms angeben, damit das neue Modal wie unten gezeigt geschlossen und geöffnet werden 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 data-dismiss="modal" zu tun, wird das Scroll-Problem laut @gravity und @kuldeep in Kommentaren auftreten.

0
shivgre

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
    }
0
Moein masoudi
$("#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})});
0
Ajay Kabariya

Versuche dies

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

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

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

Ich benutze einen anderen Weg:

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