Modalità Bootstrap: chiudi corrente, apri nuovo

Ho cercato per un po ', ma non riesco a trovare una soluzione per questo. Voglio quanto segue:

• Apri un URL all'interno di un modale Bootstrap. Ho questo lavoro fuori rotta. Quindi il contenuto viene caricato dinamicamente.
• Quando un utente preme un pulsante all'interno di questo modale, voglio che il modale corrente si nasconda e, subito dopo, voglio che un nuovo modale si apra con il nuovo URL (su cui l'utente ha fatto clic). Anche questo contenuto del 2 ° modale viene caricato dinamicamente.
• Se l'utente chiude quindi il secondo modale, il primo modale deve tornare nuovamente.

Lo sto fissando da giorni, spero che qualcuno possa aiutarmi.

Grazie in anticipo.

Senza vedere un codice specifico, è difficile darti una risposta precisa. Tuttavia, dai documenti di Bootstrap, puoi nascondere il modale in questo modo:

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

Quindi, mostra un altro modale una volta nascosto:

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

Dovrai trovare un modo per inviare l'URL alla nuova finestra modale, ma presumo che sarebbe banale. Senza vedere il codice è difficile fornire un esempio di ciò.

So che questa è una risposta tardiva, ma potrebbe essere utile. Ecco un modo corretto e pulito per farlo, come menzionato sopra da @ karima. Puoi effettivamente attivare due funzioni contemporaneamente; triggere dismissil modale.

Markup HTML;

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

Non è esattamente la risposta, ma è utile quando si desidera chiudere il modale corrente e aprirne uno nuovo.

Nell'html nello stesso pulsante, puoi chiedere di chiudere il modale corrente con data-dismiss e aprire un nuovo modal direttamente con data-target:

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

Il problema data-dismiss="modal"è che sposterà il tuo contenuto a sinistra

Sto condividendo ciò che ha funzionato per me, problema statment era apertura pop1dapop2

CODICE JS

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

$("#popup2").click(function() {
    $('#popup1').modal('hide');
    showPopup2 = true;
});

Uso questo metodo:

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

Usando il seguente codice puoi nascondere il primo modale e aprire immediatamente il secondo modale, usando la stessa strategia puoi nascondere il secondo modale e mostrare il primo.

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

È necessario aggiungere il seguente attributo al collegamento o al pulsante in cui si desidera aggiungere questa funzionalità:

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

Un blog dettagliato: http://sforsuresh.in/bootstrap-modal-window-close-current-open-new-modal/

data-dismiss="modal" 

viene utilizzato per chiudere il modello aperto esistente. puoi impostarlo sul nuovo modello

Come accennato in precedenza Nell'html nello stesso pulsante, puoi chiedere di chiudere il modal corrente con data-dismiss e aprire un nuovo modal direttamente con data-target:

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

Ma questo farà scomparire la barra di scorrimento e noterai che se il secondo modale era più lungo del primo

Quindi la soluzione è aggiungere il seguente stile nello stile inline modale:

Style = "overflow-y : scroll ; "

Con BootStrap 3, puoi provare questo: -

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

Testato per funzionare con: http://getbootstrap.com/javascript/#modals (fare prima clic su "Launch Demo Modal").

Ho esattamente lo stesso problema e la mia soluzione è solo se la finestra di dialogo modale ha l'attributo [role = "dialog"]:

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

Ho avuto lo stesso problema di @Gravity Grave per cui lo scorrimento non funziona se lo usi

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

insieme a

data-dismiss="modal"

Lo scorrimento non funziona correttamente e torna a scorrere la pagina anziché il modale. Ciò è dovuto alla rimozione dei dati dalla classe modal-open dal tag.

La mia soluzione alla fine è stata quella di impostare l'html del componente interno sul modal e utilizzare css per sfumare il testo in / out.

Utilizzo della funzione clic:

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

Dritta:

Assicurati che quello che vuoi mostrare sia un modale indipendente.

In primo modale:

sostituire il collegamento di eliminazione modale nel piè di pagina con il collegamento di chiusura sotto.

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

Nella seconda modalità:

Quindi il secondo modale sostituisce il div superiore con il tag div inferiore.

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

Ho avuto lo stesso problema, scrivendo questo qui nel caso in cui qualcuno in futuro si imbatta in questo e ha problemi con più modali che devono avere anche lo scorrimento (sto usando Bootstrap 3.3.7)

Quello che ho fatto è avere un pulsante come questo all'interno del mio primo modale:

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

Nasconderà il primo e quindi visualizzerà il secondo, e nel secondo modale avrei un pulsante di chiusura simile a questo:

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

Quindi questo chiuderà il secondo modale e aprirà il primo e per far funzionare lo scorrimento ho aggiunto al mio file .css questa riga:

.modal {
overflow: auto !important;
}

PS: solo una nota a margine, devi avere questi modali separatamente, il modale minore non può essere annidato nel primo mentre nascondi il primo

Quindi ecco l'esempio completo basato sull'esempio modale bootstrap:

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

Prova questo

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

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

Uso un altro modo:

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

Se vuoi chiudere il modale aperto in precedenza mentre apri il nuovo modale, devi farlo da javascript / jquery chiudendo prima il modale aperto corrente e quindi dare un timeout di 400 ms per consentirgli di chiudersi e quindi aprire il nuovo modale come sotto il codice :

$('#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

Se provi a farlo con il, data-dismiss="modal"allora avrà il problema di scorrimento come menzionato da @gravity e @kuldeep nei commenti.

Nessuna delle risposte mi ha aiutato poiché volevo ottenere qualcosa che fosse esattamente lo stesso menzionato nella domanda.

Ho creato un plugin jQuery per questo scopo.

/*
 * 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 funzionante per riferimento, JSFiddle: https://jsfiddle.net/gumdal/67hzgp5c/

Devi solo invocare con la mia nuova API " showStackedModal()" invece che solo " modal('show')". La parte nascosta può ancora essere la stessa di prima e l'approccio impilato di mostrare e nascondere le modali viene automaticamente curato.

Soluzione semplice ed elegante per BootStrap 3.x. Lo stesso modale può essere riutilizzato in questo modo.

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

se usi mdb usa questo codice

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

Potrei essere un po 'in ritardo ma penso di aver trovato una soluzione funzionante.

Necessario -

jQuery

Tutte le modalità con un pulsante di chiusura / eliminazione con attributi impostati come segue:

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

Si prega di vedere la classe close_modal aggiunta alle classi del pulsante

Ora per chiudere tutte le modali esistenti, chiameremo

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

Quindi, ovunque tu voglia aprire un modal

Basta aggiungere il codice sopra e tutti i tuoi modali aperti verranno chiusi.

Quindi aggiungi il tuo codice normale per aprire il modale desiderato

$("#DesiredModal").modal();

Nascondi finestra di dialogo modale.

Metodo 1: utilizzo di Bootstrap.

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

Metodo 2: utilizzo di stopPropagation().

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

Metodo 3: dopo il metodo mostrato, invocare.

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

Metodo 4: utilizzo di CSS.

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

Questo codice, chiude modale aperto, apre il nuovo modale ma immediatamente viene chiuso il nuovo modale.

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

La mia soluzione per aprire un nuovo modale dopo aver chiuso l'altro è:

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

Basta copiare e incollare questo codice e puoi sperimentare con due modali. Il secondo modale è aperto dopo aver chiuso il primo:

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

Saluti!