Schließen Bootstrap Modal

Question

Ich habe ein Bootstrap-Modal-Dialogfeld, das ich initial anzeigen möchte, und wenn der Benutzer auf die Seite klickt, verschwindet es. Ich habe Folgendes:

$(function () {
   $('#modal').modal(toggle)
});

        ×
        Fehler:

        Bitte korrigieren Sie die folgenden Fehler:

Das Modal wird zunächst angezeigt, schließt jedoch nicht, wenn außerhalb des Modals geklickt wird. Außerdem wird der Inhaltsbereich nicht grau hinterlegt. Wie kann ich das Modal initial anzeigen lassen, dann schließen, nachdem der Benutzer außerhalb des Bereichs geklickt hat? Und wie kann ich den Hintergrund grau hinterlegen wie im Demo?

Answer 1

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

Verwenden Sie den obigen Code, um das Hintergrundbild des Modals auszublenden, wenn Sie mehrere Modals auf einer Seite verwenden.

Answer 2

Wir können das Modal-Popup auf folgende Weise schließen:

// Wir verwenden das data-dismiss Attribut des Modal-Popups in HTML, um das Modal-Popup zu schließen, wie zum Beispiel

Schließen

 // Wir können das Modal-Popup auch über JavaScript schließen, wie zum Beispiel

Answer 3

  Bootstrap Beispiel

$(window).load(function(){
      $('#myModal').modal('show');
});
$(function () {
   $('#modal').modal('toggle');
});

  Modales Beispiel

  Modales Fenster öffnen

          ×
          Modaler Kopf

          Einige Texte im Modal.

          Schließen

Answer 4

Nach einigen Tests habe ich festgestellt, dass für das Bootstrap-Modal vor der Ausführung von $(.modal).modal('hide') nach der Ausführung von $(.modal).modal('show') eine Wartezeit erforderlich ist. In meinem Fall habe ich festgestellt, dass ich mindestens 500 Millisekunden zwischen den beiden benötige.
Das ist also mein Testfall und meine Lösung:

$('.modal-loading').modal('show');
setTimeout(function() {
  $('.modal-loading').modal('hide');
}, 500);

Answer 5

   function Löschen(){
       var id = $("#dgetid").val();
       debugger
       $.ajax({
           type: "POST",
           url: "Add_NewProduct.aspx/DeleteData",
           data: "{id:'" + id + "'}",
           datatype: "json",
           contentType: "application/json; charset=utf-8",
           success: function (result) {
               if (result.d == 1) {
                   bindData();
                   setTimeout(function(){ $('#DeleteModal').modal('hide');},1000);
               }
           }
       });
   };