it-swarm.com.de

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

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

Problem ist folgendes: Sie können das Modal schließen, indem Sie auf den Hintergrund klicken Gibt es überhaupt eine Möglichkeit, diese Funktion zu deaktivieren?.

Bootstrap-Modalseite

317
Egghead

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

Wenn du das Modal mit js öffnest, benutze:

$('#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>`
755
Doguita

Sie können ein Attribut wie folgt 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: Twitter-Bootstrap-Modalfenster nicht schließen

93

Dies ist der 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">
79
Sushan

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

 $('#myModall').modal({
                        backdrop: 'static',
                        keyboard: true, 
                        show: true
                }); 
30
ಅನಿಲ್

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.

Es gibt zwei Möglichkeiten, den Klick außerhalb des Bootstrap-Modellbereichs zu deaktivieren, um Modal-

  1. Javascript verwenden

    $('#myModal').modal({
       backdrop: 'static',
       keyboard: false
    });
    
  2. Datenattribut in HTML-Tag verwenden

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

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>

6

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

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

hintergrund: Deaktivierung des Click-Outside-Events

tastatur: Das Schlüsselwortereignis scape wurde deaktiviert

2

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

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
    }
}
1
Cava

Versuche dies:

<div
  class="modal fade"
  id="customer_bill_gen"
  data-keyboard="false"
  data-backdrop="static"
>
0
Vijay Chauhan
<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 habe auch das Problem, dass Standardwerte für ein Modellattribut => Daten-Tastatur = "true", => Daten-Hintergrund = "nicht statisch" hoffentlich helfen

0
Deepalakshmi

TLDR

backdrop: 'static'

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

geben Sie static für einen Hintergrund an, der das Modal beim Klicken nicht schließt.

0
Geoffrey Hale

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

Ich habe ein AGB-Modal, das ich zwingen wollte, bevor ich fortfahre. Die Standardeinstellungen "statisch" und "Tastatur" gemäß den Optionen machten es unmöglich, die Seite nach unten zu scrollen, da die AGB nur wenige Seiten umfassen log, statisch war für mich nicht die antwort.

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

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

0
RGB
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.
})
0
sonu pokade