Deaktivieren Sie das Klicken außerhalb des Bootstrap-Modalbereichs, um das Modal zu schließen.

Question

Ich erstelle eine Bootstrap-Website mit ein paar Bootstrap-'Modals'. Ich versuche, einige der Standardfunktionen anzupassen.

Das Problem ist folgendes; Man kann das Modal durch Klicken auf den Hintergrund schließen. Gibt es eine Möglichkeit, diese Funktion zu deaktivieren? Nur bei bestimmten Modals?

Bootstrap-Modal-Seite

Answer 1

Sie können verwenden

$.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';
$.fn.modal.prototype.constructor.Constructor.DEFAULTS.keyboard =  false;

um das Standardverhalten zu ändern.

Answer 2

Kasse ::

$(document).ready(function() {
    $("#popup").modal({
        show: false,
        backdrop: 'static'
    });

    $("#click-me").click(function() {
       $("#popup").modal("show");             
    });
});

                ×
                Standard Selectpickers

                    Senf
                    Ketchup
                    Gurkenrelish

                Schließen
                Änderungen speichern

        Klicke hier

Answer 3

Es gibt zwei Möglichkeiten, um das Klicken außerhalb des Bereichs des Bootstrap-Modells zu deaktivieren, um das Modal zu schließen:

1. Verwendung von JavaScript

   $('#myModal').modal({
      backdrop: 'static',
      keyboard: false
   });

2. Verwendung von Datenattributen im HTML-Tag

   data-backdrop="static" data-keyboard="false" //Schreibe diese Attribute in den Button, auf den du klickst, um das modale Popup zu öffnen.

Answer 4

Eine weitere Option, wenn Sie nicht wissen, ob das Modal bereits geöffnet wurde oder noch nicht und Sie die Modaloptionen konfigurieren müssen:

Bootstrap 3.4

var $modal = $('#modal');
var keyboard = false; // Verhindert das Schließen durch ESC
var backdrop = 'static'; // Verhindert das Schließen durch Klicken außerhalb des Modals

if(typeof $modal.data('bs.modal') === 'undefined') { // Modal wurde noch nicht geöffnet
    $modal.modal({
        keyboard: keyboard,
        backdrop: backdrop
    });
} else { // Modal wurde bereits geöffnet
    $modal.data('bs.modal').options.keyboard = keyboard;
    $modal.data('bs.modal').options.backdrop = backdrop;

    if(keyboard === false) { 
        $modal.off('keydown.dismiss.bs.modal'); // ESC deaktivieren
    } else { // 
        $modal.data('bs.modal').escape(); // ESC zurücksetzen
    }
}

Bootstrap 4.3+

var $modal = $('#modal');
var keyboard = false; // Verhindert das Schließen durch ESC
var backdrop = 'static'; // Verhindert das Schließen durch Klicken außerhalb des Modals

if(typeof $modal.data('bs.modal') === 'undefined') { // Modal wurde noch nicht geöffnet
    $modal.modal({
        keyboard: keyboard,
        backdrop: backdrop
    });
} else { // Modal wurde bereits geöffnet
    $modal.data('bs.modal')._config.keyboard = keyboard;
    $modal.data('bs.modal')._config.backdrop = backdrop;

    if(keyboard === false) { 
        $modal.off('keydown.dismiss.bs.modal'); // ESC deaktivieren
    } else { // 
        $modal.data('bs.modal').escape(); // ESC zurücksetzen
    }
}

Ändere Optionen in _config

Answer 5

Verwenden Sie dieses CSS für Modal und modal-dialog

.modal{
    pointer-events: none;
}

.modal-dialog{
    pointer-events: all;
 }

Dies kann Ihr Problem im Modal lösen