it-swarm.com.de

Wie setze ich das bootstrap modal zurück, wenn es geschlossen wird und öffne es neu?

Ich habe ein Listenfeld im bootstrap Modal und eine Schaltfläche. Wenn die Schaltfläche angeklickt wird, wird eine neue Schaltfläche in einem Div im Modal gerendert. Wenn ich das Modal schließe und es wieder öffne, die letzte Operationen, die auf dem Modal ausgeführt werden, wie die zuvor gerenderte Schaltfläche, sind auf dem Modal weiterhin vorhanden.

So setzen Sie das Modal zurück, sodass beim erneuten Öffnen des Modals die Schaltfläche nicht vorhanden ist und der Benutzer die Option erneut aus dem Listenfeld auswählen und auf die Schaltfläche klicken kann, um eine neue Schaltfläche zu rendern, usw.

        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Select Language</h4>
              </div>
              <div class="modal-body">                

                <button type="button" class="btn" data-dismiss="modal">Close</button>                    
                <button type="button" class="btn" id="submit_form">Submit</button>

              <div class="modal-body1">
                <div id="placeholder-div1">
                </div>                    
              </div>

              </div>

              <div class="modal-footer">


              <script>                    
                $('#submit_form').on('click', function() {
                    $(".modal-body1").html('<h3>test</h3>');
                });                                    
              </script>

              <script>                    
                $(function(){                    
                    $('.modal-footer').click(function() {
                       $('.modal').modal('hide');        
                    });                          
                }); 
              </script>

              </div>

            </div>
          </div>
        </div>

- Update ---

Warum funktioniert das nicht?

              <script type="text/javascript">  
                $(function(){  
                      $('#myModal').on('hidden.bs.modal', function (e) {
                      console.log("Modal hidden");
                      $("#placeholder-div1").html("");
                    });
                });

              </script>
52
New to Rails

Setzen Sie Inhalte einfach manuell zurück, wenn das Modal ausgeblendet ist:

$(".modal").on("hidden.bs.modal", function(){
    $(".modal-body1").html("");
});

Es gibt mehr Veranstaltungen. Mehr darüber hier

$(document).ready(function() {
  $(".modal").on("hidden.bs.modal", function() {
    $(".modal-body1").html("Where did he go?!?!?!");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class='modal-body1'>
          <h3>Close and open, I will be gone!</h3>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
45
Justinas

Was mir geholfen hat, war folgende Zeile in die Ready-Funktion zu setzen:

$(document).ready(function()
{
    ..
    ...

    // codes works on all bootstrap modal windows in application
    $('.modal').on('hidden.bs.modal', function(e)
    { 
        $(this).removeData();
    }) ;

    ...
    ..
});

Wenn ein modales Fenster geschlossen und wieder geöffnet wird, werden die zuvor eingegebenen und ausgewählten Werte auf die ursprünglichen Werte zurückgesetzt.

Ich hoffe das hilft dir auch!

22
eheydenr

Versuchen Sie, das Element zu klonen und dann zu entfernen und erneut hinzuzufügen, wenn das Modal ausgeblendet ist. Dies sollte alle Ereignisse enthalten, obwohl ich dies nicht mit allen Versionen von allem gründlich getestet habe.

var originalModal = $('#myModal').clone();
$(document).on('#myModal', 'hidden.bs.modal', function () {
    $('#myModal').remove();
    var myClone = originalModal.clone();
    $('body').append(myClone);
});
15
Rob

Versuchte es und funktioniert gut

$('#MyModal').on('hidden.bs.modal', function () {
    $(this).find('form').trigger('reset');
})

reset ist eine eingebaute Dom-Funktion. Sie können auch $(this).find('form')[0].reset(); verwenden.

Und die modale Klasse von Bootstrap enthüllt einige Ereignisse, um sich in die modale Funktionalität einzuklinken, detail at here .

hide.bs.modal Dieses Ereignis wird sofort ausgelöst, wenn die Methode hide instance aufgerufen wurde.

hidden.bs.modal Dieses Ereignis wird ausgelöst, wenn das Modal für den Benutzer nicht mehr sichtbar ist (es wird gewartet, bis die CSS-Übergänge abgeschlossen sind).

11
Vatsal Shah

Um alle Eingabefelder eines Modals zurückzusetzen, gehen Sie wie folgt vor.

$(".modal-body input").val("")
8
seetha

Hier ist eine alternative Lösung.

Wenn Sie viele Änderungen am DOM vornehmen (Hinzufügen/Entfernen von Elementen und Klassen), müssen möglicherweise mehrere Dinge zurückgesetzt werden. Anstatt jedes Element zu löschen, wenn das Modal geschlossen wird, können Sie das gesamte Modal bei jedem erneuten Öffnen zurücksetzen.

Beispielcode:

(function(){

    var template = null

    $('.modal').on('show.bs.modal', function (event) {
        if (template == null) {
            template = $(this).html()
        } else {
            $(this).html(template)
        }
        // other initialization here, if you want to
    })

})()

Sie können Ihren Ausgangszustand weiterhin in HTML schreiben, ohne sich zu viele Gedanken darüber machen zu müssen, was später damit geschehen wird. Sie können Ihren UI-JS-Code schreiben, ohne sich später Gedanken machen zu müssen. Bei jedem Neustart des Modals wird derselbe Status wie beim ersten Mal wiederhergestellt.


Edit: Hier ist eine Version, die mehrere Modale verarbeiten sollte (ich habe es nicht getestet) ...

(function(){

    $('.modal').on('show.bs.modal', function (event) {
        if (!$(this).data('template')) {
            $(this).data('template', $(this).html())
        } else {
            $(this).html($this.data('template'))
        }
        // other initialization here, if you want to
    })

})()
3
musicin3d
(function(){
        $(".modal").on("hidden.bs.modal", function(){
            $(this).removeData();
        });
});

Dies ist die perfekte Lösung, um Kontakte zu entfernen, während hide/close bootstrap modal).

2
Shamim Hasan

sie können dies versuchen

$('body').on('hidden.bs.modal', '.modal', function () {
     $(this).removeData('bs.modal');
});

Es werden alle Daten aus dem Modell entfernt und zurückgesetzt.

0
Jigarb1992

Die folgenden Anweisungen zeigen, wie Modal ohne Verwendung von Bootstrap geöffnet/erneut geöffnet wird.

Fügen Sie zwei Klassen in CSS hinzu

Verwenden Sie anschließend die folgende jQuery, um das Modal erneut zu öffnen, wenn es geschlossen ist.

.hide_block
 {
   display:none  !important;
 }

 .display_block
 {
    display:block !important;
 } 

 $("#Modal").removeClass('hide_block');
 $("#Modal").addClass('display_block');
 $("Modal").show("slow");

Es hat gut funktioniert für mich :)

0
Kiran Kumar D M

Ich benutze BS 3.3.7 und ich habe ein Problem, wenn ich ein Modal öffne und dann schließe. Also habe ich das benutzt, um den Code innerhalb des Modal Div komplett zu entfernen. Nun, Sie können fragen, warum der Padding-Right-Code in chrome für Windows, wenn Sie ein Modal von einem anderen Modal öffnen und dieses zweite Modal schließen, das mit einem 17px-Padding rechts bleibt. Hoffe, es hilft. .

$(document)
.on('shown.bs.modal', '.modal', function () { 
    $(document.body).addClass('modal-open') 
})
.on('hidden.bs.modal', '.modal', function () { 
    $(document.body).removeClass('modal-open') 
    $(document.body).css("padding-right", "0px");
 $(this).removeData('bs.modal').find(".modal-dialog").empty();
})
0
João Falcão

/ * Dadurch wird der HTML-Inhalt mit dem neuen HTML-Code geändert, den Sie in Ihrem Modal aktualisieren möchten, ohne dass zu viele Zurücksetzungen erforderlich sind ... * /

var = ""; //HTML to be changed 

`$ (". classbuttonClicked "). click (function () {

$ ('# ModalDivToChange'). Html (var); $ ('# myModal'). modal ('show'); }); `

0
giuseppe