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

Verwenden Sie dies, wenn Sie den äußeren Klick für alle Modals mit jQuery deaktivieren möchten. Fügen Sie dieses Skript nach jQuery zu Ihrem Javascript hinzu.

jQuery(document).ready(function () {
    jQuery('[data-toggle="modal"]').each(function () {
       jQuery(this).attr('data-backdrop','static');
       jQuery(this).attr('data-keyboard','false');
    });
});

Answer 2

Wenn Sie @ng-bootstrap verwenden, verwenden Sie folgendes:

Komponente

import { Component, OnInit } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss'],
})
export class ExampleComponent implements OnInit {

  constructor(
    private ngbModal: NgbModal
  ) {}

  ngOnInit(): void {
  }

  openModal(exampleModal: any, $event: any) {
    this.ngbModal.open(exampleModal, {
      size: 'lg', // set modal size
      backdrop: 'static', // disable modal from closing on click outside
      keyboard: false, // disable modal closing by keyboard esc
    });
  }
}

Vorlage

            Test modal

Dieser Code wurde in Angular 9 getestet mit:

1. "@ng-bootstrap/ng-bootstrap": "^6.1.0",

2. "bootstrap": "^4.4.1",

Answer 3

Für Bootstrap 4.x können Sie wie folgt vorgehen:

$('#modal').data('bs.modal')._config.backdrop = 'static';
$('#modal').data('bs.modal')._config.keyboard = false;

Answer 4

TLDR

backdrop: 'static'

https://getbootstrap.com/docs/3.3/javascript/#modals-options

specify static for a backdrop which doesn't close the modal on click.

Translated to :

TLDR

backdrop: 'static'

https://getbootstrap.com/docs/3.3/javascript/#modals-options

geben Sie static für einen Hintergrund an, der das Modal bei einem Klick nicht schließt.

Answer 5

Keine dieser Lösungen hat für mich funktioniert.

Ich habe ein Modal mit den Geschäftsbedingungen, die ich Personen vor der Fortsetzung zur Überprüfung aufzwingen wollte... die Standardeinstellungen "statisch" und "Tastatur" machten es unmöglich, auf der Seite nach unten zu scrollen, da die Geschäftsbedingungen mehrere Seiten lang sind, statisch war keine Lösung für mich.

Also löste ich stattdessen die Klickmethode vom Modal, mit dem folgenden konnte ich den gewünschten Effekt erzielen.

$('.modal').off('click');