web-dev-qa-db-fra.com

Ouvrez un modal depuis un autre modal et fermez le premier modal (de lancement)

J'utilise le plug-in Bootstrap Modal Window, mais je voudrais ouvrir une autre fenêtre lorsque je clique sur Suivant et ferme la première. Comment puis-je le faire?

$('[data-toggle="modal"]').click(function(e) 
    {
        e.preventDefault();
        var url = $(this).attr('href');
        if (url.indexOf('#') == 0)
        {
            $(url).modal('open');
        } 
        else 
        {
            $.get(url, function(data) 
            {
                $(data).modal();
            }).success(function() { $('input:text:visible:first').focus(); });
        }
    });

<a href="next.html" data-toggle="modal">Add Record</a>

next.html Code de fichier

<div class="modal fade" id="compose-modal" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">First Window</h4>
            </div>
            <form action="#" method="post">

                <div class="modal-footer clearfix">
                    <button type="button" data-dismiss="modal">Discard</button>

                    <button type="submit">Submit</button>
                     <a href="next2.html" data-toggle="modal" >Next</a>
                </div>
            </form>
        </div>
    </div>
</div>
jquerytwitter-bootstrapbootstrap-modalmodal-window
12
User

Une réponse plus récente se trouve ci-dessous: https://stackoverflow.com/a/44391959/1004312

Vous ouvrez un modal à partir d'un autre modal et fermez le premier. Si vous utilisez Bootstrap 3, vous pouvez effectuer les opérations suivantes:

DEMO: http://jsbin.com/venek/1/edit

Dans le premier modal, indiquez le lien vers le prochain modal (# modal-1 et # modal-2 sont des exemples d'identifiants)

  <a href="#modal-2" data-toggle="modal" data-dismiss="modal">Next</a>

Dans le second modal, mettez le lien vers le premier:

  <a href="#modal-1" data-toggle="modal" data-dismiss="modal">Previous</a>

DEMO: http://jsbin.com/venek/1/edit

23
Christina

Très bien tout le monde, recule. J'ai ça.

Cette méthode annule les problèmes de bourrage et de défilement présents dans d’autres méthodes (voir ci-dessous) et constitue le moyen le plus propre d’obtenir les fonctionnalités requises à l’aide de Bootstrap Modals.

En ligne

<a onclick="$('.modal-to-close').one('hidden.bs.modal', function() { $('.modal-to-open').modal('show'); }).modal('hide');">Open Modal</a>

Pleine graisse:

<script>
    $(function () {
        $('.selector').click(function() {
            $('.modal-to-close').one('hidden.bs.modal', function() {
                $('.modal-to-open').modal('show'); 
            }).modal('hide');
        });
    });
</script>

<a class="selector">Open Modal</a>

Beastmode:

<script>
    $(function () {
        $('[data-bm-close][data-bm-open]').on('click', function () {
            var $this = $(this);
            $($this.data('bm-close')).one('hidden.bs.modal', function () {
                $($this.data('bm-open')).modal('show');
            }).modal('hide');
        });
    });
</script>

<a data-bm-close=".modal-to-close" data-bm-open=".modal-to-open">Open Modal</a>

Astuce: Sauf si vous devez le faire plusieurs fois, je vous recommande d'utiliser la version Inline.

Problèmes présents dans d'autres réponses

Cela crée un problème lorsque votre modal a plus de hauteur que votre écran . Comme data-licencié = "modal" supprime la classe modal-open de la balise body . Ainsi, lorsque vous faites défiler, modal ne défile pas, mais le fond fané commence à bouger, ce qui est mauvais. // Deepak Yadav

Peut confirmer le problème signalé par @Deepak. En outre, la page sera incrémentée et appliquée "padding-right" de + 17 pixels à chaque fois que vous ouvrez un fichier Depuis un autre (le mode modal peut être nécessaire). Ceci est vrai pour presque toutes les méthodes de cette page Voir ma réponse pour une méthode qui évite ces problèmes. // Matthew Hudson

11
Matthew Hudson
<a data-toggle="modal" data-target="#open1" data-dismiss="modal">OPEN 1</a>
<a data-toggle="modal" data-target="#open2" data-dismiss="modal">OPEN 2</a>

$('.modal).on('show.bs.modal',function(){
setTimeout(function(){
$('body').addClass('modal-open');
},800);
});
3
ucpc

@Deepak Yadav Problème: data-rejet = "modal" supprime la classe modal-open de la balise body Peut-être qu'il existe une solution avec JS 

Ajouter la classe aux liens suivant-précédent

     <a class="NeXTSTEP" href="#modal-2" data-toggle="modal" data-dismiss="modal">Next</a>
     <a class="previousStep" href="#modal-1" data-toggle="modal" data-dismiss="modal">previous</a>

JS:

var $body = $('body')
  $("a.NeXTSTEP").click(function(){
   $body.addClass('modal1-on')
  });
  $("a.previousStep").click(function(){
   $body.addClass('modal2-on')
  });

  $('#modal-1').on('hidden.bs.modal', function () {
  $body.removeClass('modal2-on')
  });
  $('#modal-2').on('hidden.bs.modal', function () {
  $body.removeClass('modal1-on')
  });

Puis css:

    body.modal1-on, body.modal2-on {overflow: hidden;}
1
serialko

quand vous fermez bootstrap deuxième popup, seulement deuxième fermer et le premier est ouvert 

pour cela, nous pouvons utiliser le deuxième bouton de fermeture contextuel sur le premier identifiant modal de bootstrap

exemple

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal1" data-dismiss="modal">Close</button>
0
govind