it-swarm.com.de

Öffnen Sie ein Modal von einem anderen Modal aus und schließen Sie das erste (startende) Modal

Ich benutze das Bootstrap Modal Window Plugin, aber ich möchte ein anderes Modellfenster öffnen, wenn ich auf Weiter klicke und das erste schließe. wie kann ich es tun?

$('[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 Dateicode

<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>
12
User

Eine aktuellere Antwort finden Sie unten: https://stackoverflow.com/a/44391959/1004312

Sie öffnen ein Modal aus einem anderen Modal und schließen das erste. Wenn Sie Bootstrap 3 verwenden, können Sie Folgendes tun:

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

Setzen Sie im ersten Modal den Link zum nächsten Modal (# modal-1 & # modal-2 sind Beispiel-IDs)

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

Im zweiten Modal den Link auf den ersten setzen:

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

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

23
Christina

In Ordnung, alle zurück, Ich habe das.

Diese Methode schließt sowohl das Auffüllen als auch das Scrollen in anderen Methoden aus (siehe unten) und ist [IMO] der sauberste Weg, um die erforderliche Funktionalität mithilfe von Bootstrap Modals zu erreichen.

In der Reihe

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

Vollfett:

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

Bestienmodus:

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

Tipp: Wenn Sie dies nicht mehr als einmal tun müssen, empfehle ich die Inline - Version.


Probleme in anderen Antworten

Es entsteht ein Problem, wenn Ihr Modal mehr Höhe hat als Ihr Bildschirm. Wenn data-dismiss = "modal" die modal-open-Klasse aus dem body -Tag entfernt. Wenn Sie also scrollen, modal scrollt nicht, aber der verblasste Hintergrund beginnt sich zu bewegen, was schlecht ist // Deepak Yadav

Kann das von @Deepak gemeldete Problem bestätigen. Außerdem wird die Seite Um + 17px erhöht und erzwungen, wenn Sie ein -Modal von innen aus einem anderen öffnen (möglicherweise muss Modal sein) Größer als die Seite .__, damit dies geschieht.) Dies gilt für fast alle Methoden auf dieser -Seite. Siehe meine Antwort für eine Methode, die diese Probleme vermeidet. // 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 Problem: data-dismiss = "modal" entfernt modal-open-Klasse aus dem body-Tag Vielleicht gibt es eine Lösung mit JS: 

Klasse zu den vorigen Links hinzufügen

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

Dann css:

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

wenn Sie das zweite Popup-Fenster schließen, ist nur das zweite Schließen und der erste geöffnet 

dafür können wir die zweite Popup-Schaltfläche zum Schließen der ersten Modal-ID von Bootstrap verwenden

beispiel

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