it-swarm.com.de

Wie kann ich Bootstrap 3 modal programmatisch schließen? AJAX Erfolg?

Ich habe einen Code, den ich wollte, um den Modal für den Erfolg von Ajax zu schließen. Das ist mein Code:

Skript

success: function() {
    console.log("delete success");
    $('#deleteContactModal').modal('hide');
    $( "#loadContacts" ).load( "/main/loadContacts" );

}

html

<div class="modal fade" id="deleteContactModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
<!--everything goes here -->
    </div>
  </div>
</div>

Alles funktioniert nur, wenn der Code $('#deleteContactModal').modal('hide'); ausgelöst wird. Es wird nur ein schwarzer Bildschirm wie dieser angezeigt:

 enter image description here

Der Modal wird geschlossen, aber die schwarze Farbe ist immer noch vorhanden. Fehlt mir hier etwas? Danke im Voraus.

Ich benutze bootstrap 3.3.

10
wobsoriano

versuchen Sie, dieses Attribut mit Ihrem modalen Div aria-hidden="true" hinzuzufügen.

z.B:

<div aria-hidden="true" class="modal fade" id="deleteContactModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

Hier ist mein Arbeitsbeispiel

<div class="modal fade" id="copy_course_modal" tabindex="-1" role="dialog" aria-labelledby="copycourse" 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" id="purchaseLabel">Copy Chapter</h4>
                </div>
                <div class="modal-body">
                Modal body content here
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="saveCopiedCourse()">Copy Course</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
</div> 

und auf Erfolg dasselbe.

$("#copy_course_modal").modal('hide');
9
Qazi

Ich habe genau das gleiche Problem, und die einzige Möglichkeit, die ich finden könnte, besteht darin, die Teile der Modalgenerierung einzeln zu entfernen. Setzen Sie diese Funktion einfach in yous js und machen Sie ein Onclick-Ereignis an Ihrem Button in Ihrer HTML- oder Js-Datei. Hoffe ich habe geholfen.

function hideModal(){
  $(".modal").removeClass("in");
  $(".modal-backdrop").remove();
  $('body').removeClass('modal-open');
  $('body').css('padding-right', '');
  $(".modal").hide();
}
8
Vaios P.

Ich bin in einer ähnlichen Situation in dieses Thema geraten.

Es scheint mit der asynchronen Natur von Javascript + Bootstrap-Animationen zu tun zu haben.

Es ist ein dreckiger, dreckiger Hack, aber den Aufruf zum "Verstecken" in einem Timeout zu aktivieren, hat für mich funktioniert:

setTimeout( function(){$("#myModal").modal('hide')}, 300 );

Wenn Sie diese "Lösung" für das Problem verwenden, müssen Sie möglicherweise den Timeout-Wert anpassen. Bootstrap-Animationen scheinen etwa 125 - 200 ms zu dauern, daher bietet 300 einen Nice-Sicherheitspuffer.

6
Steven Smith

Versuchen:

$(".modal.in").modal("hide");

Dadurch wird der aktuell aktive Modalmodus ausgeblendet.

6
WhoAmI
$('#deleteContactModal').modal('hide')

Finden Sie diesen Link 

https://getbootstrap.com/docs/3.3/javascript/#modal-hide

Es gibt Details https://getbootstrap.com/docs/3.3/javascript/#modal-hide zum Modellfenster

2
Jasmeen

Dies ist nur ein Timing-Problem. Die Fade-Animation braucht Zeit und Javascript kann nicht geschlossen werden. brechen Sie einfach die Animation ab und es funktioniert einwandfrei!

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

(Nicht class = "modal fade" verwenden, jus class = "modal")

1
Caravansary

Ich habe mehrere der vorgeschlagenen Lösungen ausprobiert und die einzige, die für mich gearbeitet hat, war:

$ (". modal.in"). modal ('hide');

Einige löschten den Modal und die Kulisse, wurden jedoch bei nachfolgenden Aufrufen nicht erneut angezeigt.

1
eric gilbertson
$.ajax({
    type: "POST",
    url: "admin/pc-item-insert.php",
    data: $(this).serialize(),
    success: function(data) {
        $("#showinfo").html(data);
        $(".modal").modal("hide");                  
    },
});
1
user9197490

Einfach programmatisch klicken Sie auf die Schaltfläche Schließen des Dialogs.

$ ("button [data-dismiss =" "modal"] "). click ();

Der Dialog wird automatisch geschlossen.

1
paraguma

Ich definiere mein Modal:

<div class="modal fade" aria-hidden="true" role="dialog" id="modal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button id="btnCloseModal" hidden type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <strong>Waiting</strong>
            </div>
            <div class="modal-content">
                <div>
                    Please don't close your tab!
                </div>
                <div class="d-flex justify-content-center">
                    <div class="spinner-border" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <strong>Loading...</strong>
            </div>
        </div>
    </div>
</div>

dann erstelle ich funktion:

  var StopLoadingAnimation = function () {
$('#modal').on('show.bs.modal', function (e) {
    console.log("trigger show");
    $("#btnCloseModal").trigger("click");
});
$('#modal').on('shown.bs.modal', function (e) {
    console.log("trigger");
    $("#btnCloseModal").trigger("click");
});
$('#modal').on('hidden.bs.modal', function (e) {
    console.log("event");
    $(e.currentTarget).off('shown');
    $(e.currentTarget).off('show');
});
$("#btnCloseModal").trigger("click");
}

Meine Idee ist, nachdem Ajax Erfolg ist, wird die Funktion StopLoadingAnimation aufgerufen, was das Ereignis auslöst. Klicken Sie auf das Element btnCloseModal.

0
TrungNgo

Um den Hintergrund zu löschen

$(".modal-backdrop").toggleClass("hide, show");

getestet in bs4

0
gondwe

Keine dieser Optionen funktionierte für mich, abgesehen von der Option, die keine Modal-Überblendung verwendet. Ich wollte jedoch Modal Fade verwenden. Mein Code machte einen Ajax-Aufruf, um die Änderungen zu speichern, und dann erfolgten folgende Schritte:

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

Das Problem war, dass doRefresh dann die Seite unter dem Modal aktualisiert hat. Wenn ich doRefresh entfernt habe, hat es funktioniert. Was ich am Ende tat, war folgendes:

$('#myModal').modal('hide');
setTimeout(doRefresh, 500);
0
Philip Johnson

Dieses Problem wird gelöst, indem einzelne Elemente von Modal verdeckt werden. 

 $("#modal").modal('hide');  
 $('body').removeClass('modal-open');
 $(".modal-backdrop").remove();
0
Zoha Irshad