web-dev-qa-db-fra.com

Bootstrap modal: fermer courant, ouvrir nouveau

J'ai cherché pendant un moment, mais je ne peux pas trouver de solution à cela. Je veux ce qui suit:

  • Ouvrez une URL dans un modal Bootstrap. J'ai ce travail hors cours. Donc, le contenu est chargé dynamiquement.
  • Lorsqu'un utilisateur appuie sur un bouton de ce modal, je veux que le modal actuel soit masqué et immédiatement après, je veux qu'un nouveau modal s'ouvre avec la nouvelle URL (sur laquelle l'utilisateur a cliqué). Ce contenu de la 2e modale est également chargé dynamiquement.
  • Si l'utilisateur ferme ensuite ce 2ème modal, le premier modal doit revenir à nouveau.

Je regarde ça depuis des jours, j'espère que quelqu'un pourra m'aider.

Merci d'avance.

javascriptjquerytwitter-bootstrap
66
Eelco Luurtsema

Sans voir de code spécifique, il est difficile de vous donner une réponse précise. Cependant, à partir de la documentation Bootstrap, vous pouvez masquer le modal comme suit: 

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

Ensuite, montrez un autre modal une fois caché:

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

Vous allez devoir trouver un moyen d'envoyer l'URL à la nouvelle fenêtre modale, mais je suppose que ce serait trivial. Sans voir le code, il est difficile de donner un exemple de cela. 

39
Tim Wasson

Je sais que c'est une réponse tardive, mais cela pourrait être utile. Voici un moyen propre et propre pour y parvenir, comme @ karima l'a mentionné ci-dessus Vous pouvez réellement activer deux fonctions à la fois. trigger et dismiss le modal.

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

Démo

64
Mahmoud

Ce n'est pas exactement la réponse, mais c'est utile lorsque vous souhaitez fermer le modal actuel et en ouvrir un nouveau.

Dans le même bouton, dans le code HTML, vous pouvez demander à fermer le modal actuel avec Data-Cong et ouvrir un nouveau modal directement avec Data-target:

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

Le problème avec data-dismiss="modal" est-il changera votre contenu à gauche

Je partage ce qui a fonctionné pour moi, le problème a été d'ouvrir pop1 à partir de pop2

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

J'utilise cette méthode:

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

En utilisant le code suivant, vous pouvez masquer le premier modal et ouvrir immédiatement le deuxième modal. En utilisant la même stratégie, vous pouvez masquer le deuxième modal et afficher le premier. 

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

Vous devez ajouter l'attribut suivant au lien ou au bouton où vous souhaitez ajouter cette fonctionnalité: 

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

Un blog détaillé: http://sforsuresh.fr/bootstrap-modal-window-close-current-open-new-modal/

3
Suresh Kamrushi

J'ai exactement le même problème, et ma solution n'est que si le dialogue modal a l'attribut [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;}
    }
  });
});
2
Jonny

Avec BootStrap 3, vous pouvez essayer ceci: -

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

Testé pour fonctionner avec: http://getbootstrap.com/javascript/#modals (cliquez sur "Launch Demo Modal" en premier) 

2
Alvin K.

Utilisation de la fonction de clic:

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

La tête haute:

Assurez-vous que celui que vous voulez montrer est un modal indépendant.

1
claudios
data-dismiss="modal"

il est utilisé pour fermer le modèle ouvert existant. vous pouvez le définir sur le nouveau modèle

1
M. Lak

J'ai eu le même problème que @ Grave Grave où le défilement ne fonctionne pas si vous utilisez

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

en conjonction avec 

data-dismiss="modal"

Le défilement ne fonctionne pas correctement et revient au défilement de la page plutôt qu'au modal. Cela est dû à la suppression par la suppression de données de la classe à la classe modal-open.

Ma solution a finalement consisté à définir le code HTML du composant interne sur le modal et à utiliser css pour afficher un fondu en fondu.

1
DarthJam

Aucune des réponses ne m'a aidé puisque je voulais réaliser quelque chose qui était exactement le même que celui mentionné dans la question.

J'ai créé un plugin jQuery à cette fin.

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

Utilisation de Fiddle pour référence, JSFiddle: https://jsfiddle.net/gumdal/67hzgp5c/

Vous devez simplement appeler avec ma nouvelle API "showStackedModal()" au lieu de "modal('show')". La partie masquée peut toujours être la même qu'avant et l'approche empilée d'affichage et de masquage des modaux est automatiquement prise en charge.

0
Raj Pawan Gumdal

En premier modal:

remplacez le lien de renvoi modal dans le pied de page par un lien étroit ci-dessous.

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

En deuxième modal:

Ensuite, le second modal remplace top div par la balise div ci-dessous.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="add text for disabled people here" aria-hidden="true" id="second_model_id">
0
Taimoor Changaiz
<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

Avait le même problème, écrit ceci ici au cas où quelqu'un à l'avenir tomberait dessus et aurait des problèmes avec plusieurs modaux qui doivent avoir scrolling aussi (j'utilise Bootstrap 3.3.7)

Ce que j'ai fait est d'avoir un bouton comme celui-ci dans mon premier modal:

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

Cela cachera le premier et ensuite affichera le second, et dans le second modal, j'aurais un bouton de fermeture qui ressemblerait à ceci:

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

Donc, cela va fermer le second modal et ouvrir le premier et faire le travail scrolling work que j'ai ajouté à mon fichier .css cette ligne:

.modal {
overflow: auto !important;
}

PS: Juste une note de côté, vous devez avoir ces modaux séparément, le modal mineur ne peut pas être imbriqué dans le premier car vous masquez le premier

Donc, voici l'exemple complet basé sur l'exemple modal 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>
0
Renet

Si vous voulez fermer le modal précédemment ouvert tout en ouvrant le nouveau modal, vous devez le faire à partir de javascript/jquery en fermant d'abord le modal actuellement ouvert, puis en lui donnant un délai d'expiration de 400 ms pour lui permettre de se fermer, puis d'ouvrir le nouveau modal comme ci-dessous. : 

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

Si vous essayez de le faire avec le data-dismiss="modal", le problème de défilement mentionné par @gravity et @kuldeep apparaîtra dans les commentaires.

0
shivgre

si vous utilisez mdb utilisez ce 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

Essaye ça

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

Solution simple et élégante pour BootStrap 3.x. Le même modal peut être réutilisé de cette façon.

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

J'utilise une autre manière:

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