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

440

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

Problem ist das; Sie können das Modal schließen, indem Sie auf den Hintergrund klicken. Gibt es überhaupt eine Möglichkeit, diese Funktion zu deaktivieren? Nur für bestimmte Modalitäten?

Modale Bootstrap-Seite

javascript  css  twitter-bootstrap  modal-dialog 
— Egghead
quelle
Können Sie mir bitte sagen, welches Ereignis in dieser Situation aufgerufen wird? $ scope.ok, $ scope. $ entlassen Ich habe ein Gerät zum Senden und Abbrechen implementiert, aber ich weiß nicht, welches Ereignis in dieser Situation ausgelöst wurde.
— LoveToCode
4
— tm

Antworten:

911

Im Kapitel Optionen sehen Sie auf der von Ihnen verlinkten Seite die backdropOption. Wenn Sie diese Option mit value übergeben, 'static'wird das Schließen des Modals verhindert.
Wie @PedroVagner auf Kommentare hingewiesen hat, können Sie auch übergeben {keyboard: false}, um das Schließen des Modals durch Drücken zu verhindernEsc .

Wenn Sie das Modal mit js öffnen, verwenden Sie: 

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

Wenn Sie Datenattribute verwenden, verwenden Sie: 

 <button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
    Launch demo modal
 </button>`
— Doguita
quelle
Gibt es eine Möglichkeit, den Hintergrund in der Lage zu halten, die Klicks für andere Steuerelemente zu registrieren, aber die Modalitäten nicht zu schließen?
— Vivekanon
2
@mystikacid Dafür solltest du eine neue Frage stellen. Es ist besser, Ihnen bei Ihrem Problem und anderen Benutzern zu helfen, die nach einer ähnlichen Lösung suchen.
— Doguita
— vivekanon
3
Hatte ein einfaches, aber irritierendes Problem, stellen Sie sicher, dass Sie die Abfragezeile vor $('#modal').modal('show');Hope setzen. Hoffe, das hilft!
— Cwiggo
3
cwiggo du verwendest nicht modal $ ('# modal'). modal ('show'); - Sie verwenden nur .modal ({Hintergrund: 'statisch', Tastatur: falsch}) - ohne Show- oder Umschaltbefehl
— TV-C-15
135

Dies ist die einfachste

Sie können Ihr modales Verhalten definieren, indem Sie die Datentastatur und den Datenhintergrund definieren.

<div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static">
— Sushan
quelle
2
Dies ist das einzige, was für mich funktioniert hat. Das direkte Übergeben der Optionen in JS hat bei mir aus irgendeinem Grund einfach nicht funktioniert (Version 3.3.7). Wenn jemand anderes dies bestätigt, kann ich ein Problem mit dem Bootstrap-Team eröffnen.
— Dchacke
Anfangs funktionierte die Verwendung der js-Version auch bei mir nicht, da ich nach dem Öffnen des Modals alles eingestellt hatte. Sie sollten dies tun "$ ('# modalForm'). Modal ({Hintergrund: 'statisch', Tastatur: falsch});" davor "$ ('# modalForm'). modal ('show');". Aber für mich ist die beste Antwort von @ ಅನಿಲ್
— Lucas
Das hat bei mir funktioniert. Das Setzen der data-backdrop="static"Option auf die Modaldefinition und nicht auf die Auslösetaste, die das Modal öffnet, wie in anderen Antworten angegeben, hat bei mir funktioniert.
— TSmith
99

Sie können ein Attribut wie das folgende verwenden: data-backdrop="static"oder mit Javascript: 

$('#myModal').modal({
    backdrop: 'static',
    keyboard: false  // to prevent closing with Esc button (if you want this too)
})

Siehe auch diese Antwort: Das Schließen des modalen Fensters des Twitter-Bootstraps darf nicht geschlossen werden

— Antonis Grigoriadis
quelle
<div id = "modal" class = "modal hide einblenden in" data-keyboard = "false" data-background = "static"> Dies ist die beste Antwort.
— Kamlesh
34

In meiner Anwendung verwende ich den folgenden Code, um das Bootstrap-Modal über jQuery anzuzeigen.

 $('#myModall').modal({
                        backdrop: 'static',
                        keyboard: true, 
                        show: true
                });
— ಅನಿಲ್
quelle
Dies ist eine gute Antwort, da dieser Code nur funktioniert, wenn Modal geöffnet ist.
— Deepak Dholiyan
32

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.

— David Navarro Astudillo
quelle
Tolle Antwort, da es die Situation für alle Modalitäten behandelt.
— Haris ur Rehman
1
In Bootstrap v4 lautet die Syntax: $ .fn.modal.prototype.constructor.Constructor.Default.backdrop = 'static';
— Garry English
11

Es gibt zwei Möglichkeiten, das Klicken außerhalb des Bootstrap-Modellbereichs zu deaktivieren, um modal- zu schließen.

  1. mit Javascript

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

  2. Verwenden des Datenattributs im HTML-Tag

    data-backdrop="static" data-keyboard="false" //write this attributes in that button where you click to open the modal popup.
— Gaurav Tripathi
quelle
9

Schau dir das an ::

$(document).ready(function() {
    $("#popup").modal({
        show: false,
        backdrop: 'static'
    });
    
    $("#click-me").click(function() {
       $("#popup").modal("show");             
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" rel="stylesheet">
        </head>
    <body>
        <div class="modal" id="popup" style="display: none;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3>Standard Selectpickers</h3>
            </div>
            <div class="modal-body">
                
                <select class="selectpicker" data-container="body">
                    <option>Mustard</option>
                    <option>Ketchup</option>
                    <option>Relish</option>
                </select>

            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                <button class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <a id="click-me" class="btn btn-primary">Click Me</a> 
    </body>
        <script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
</html>
Erweitern Sie das Snippet

— Sachin Sanchaniya
quelle
6

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; // Prevent to close by ESC
var backdrop = 'static'; // Prevent to close on click outside the modal

if(typeof $modal.data('bs.modal') === 'undefined') { // Modal did not open yet
    $modal.modal({
        keyboard: keyboard,
        backdrop: backdrop
    });
} else { // Modal has already been opened
    $modal.data('bs.modal').options.keyboard = keyboard;
    $modal.data('bs.modal').options.backdrop = backdrop;

    if(keyboard === false) { 
        $modal.off('keydown.dismiss.bs.modal'); // Disable ESC
    } else { // 
        $modal.data('bs.modal').escape(); // Resets ESC
    }
}

Bootstrap 4.3+

var $modal = $('#modal');
var keyboard = false; // Prevent to close by ESC
var backdrop = 'static'; // Prevent to close on click outside the modal

if(typeof $modal.data('bs.modal') === 'undefined') { // Modal did not open yet
    $modal.modal({
        keyboard: keyboard,
        backdrop: backdrop
    });
} else { // Modal has already been opened
    $modal.data('bs.modal')._config.keyboard = keyboard;
    $modal.data('bs.modal')._config.backdrop = backdrop;

    if(keyboard === false) { 
        $modal.off('keydown.dismiss.bs.modal'); // Disable ESC
    } else { // 
        $modal.data('bs.modal').escape(); // Resets ESC
    }
}

Ändern Sie die Optionen in _config

— Cava
quelle
für Bootstrap 4 + sollte es _setEscapeEvent()statt sein .escape()?
— Ivan Bacher
@ IvanBacher Funktioniert für mich mit .escape ()
— Cava
5

Die Lösung, die für mich funktioniert, ist die folgende: 

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

Hintergrund: Deaktiviert das Ereignis "Klick außerhalb"

Tastatur: Deaktiviert das Scape-Schlüsselwortereignis

— Jorge Santos Neill
quelle
4 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">

Versuchen Sie dies, während meiner Anwendungsentwicklung ... Ich bin auch auf das Problem gestoßen, dass Standardwerte für ein Modellattribut => data-keyboard="true", => sinddata-backdrop="non static"

Hoffe das wird dir helfen!

— Deepalakshmi
quelle
3

Versuche dies:

<div
  class="modal fade"
  id="customer_bill_gen"
  data-keyboard="false"
  data-backdrop="static"
>
— Vijay Chauhan
quelle
Das hat bei mir funktioniert danke .....
— Ajay Kumar
1

Keine dieser Lösungen hat bei mir funktioniert.

Ich habe ein Modal mit allgemeinen Geschäftsbedingungen, das ich zwingen wollte, zu überprüfen, bevor ich fortfahre. Die Standardeinstellungen "statisch" und "Tastatur" gemäß den Optionen machten es unmöglich, die Seite nach unten zu scrollen, da die allgemeinen Geschäftsbedingungen einige Seiten umfassen log, statisch war nicht die Antwort für mich.

Also habe ich stattdessen die Klickmethode auf dem Modal gelöst, mit dem folgenden konnte ich den gewünschten Effekt erzielen.

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

— RGB
quelle
0 
You can Disallow closing of #signUp (This should be the id of the modal) modal when clicking outside of modal.
As well as on ESC button.
jQuery('#signUp').on('shown.bs.modal', function() {
    jQuery(this).data('bs.modal').options.backdrop = 'static';// For outside click of modal.
    jQuery(this).data('bs.modal').options.keyboard = false;// For ESC button.
})
— Sonu Pokade
quelle
0

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

<div (click)="openModal(exampleModal, $event)"> </div>
    <ng-template #exampleModal let-modal>
        <div class="modal-header">
            <h5 class="modal-title">Test modal</h5>
        </div>
        <div class="modal-body p-3">
            <form action="">
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="">Test field 1</label>
                        <input type="text" class="form-control">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="">Test field 2</label>
                        <input type="text" class="form-control">
                    </div>

                    <div class="text-right pt-4">
                        <button type="button" class="btn btn-light" (click)="modal.dismiss('Close')">Close</button>
                        <button class="btn btn-primary ml-1">Save</button>
                    </div>
            </form>
        </div>
    </ng-template>

Dieser Code wurde auf Winkel 9 getestet mit:

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

  2. "bootstrap": "^ 4.4.1",

— Hamfri
quelle
0

Verwenden Sie diese Option, wenn Sie den äußeren Klick für alle Modalitäten 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');
    });
});
— Sahan
quelle
-1

Sie können dies auch ohne JQuery tun, wie folgt:

<div id="myModal">

var modal = document.getElementById('myModal');
modal.backdrop = "static";
modal.keyboard = false;
— Sirar Salih
quelle
-2

Fügen Sie das unten stehende CSS entsprechend Ihrer gewünschten Bildschirmbreite hinzu.

@media (min-width: 991px){
    .modal-dialog {
        margin: 0px 179px !important;
    }
}
— Atul
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.