Nonaktifkan klik di luar area modal bootstrap untuk menutup modal

440

Saya membuat situs web bootstrap, dengan beberapa 'Modals' Bootstrap. Saya mencoba menyesuaikan beberapa fitur default.

Masalahnya adalah ini; Anda dapat menutup modal dengan mengklik pada latar belakang. Apakah ada cara untuk menonaktifkan fitur ini? Hanya pada modif tertentu?

Halaman modal bootstrap

javascript  css  twitter-bootstrap  modal-dialog 
— Orang terpelajar
sumber
dapatkah Anda memberi tahu saya acara apa yang disebut dalam situasi ini? $ scope.ok, $ scope. $ memberhentikan saya telah menerapkan untuk mengirim dan membatalkan tetapi saya tidak tahu acara dipecat dalam situasi ini.
— LoveToCode
4
— tm

Jawaban:

913

Pada bab Opsi, di halaman yang Anda tautkan, Anda dapat melihat backdropopsi tersebut. Melewati opsi ini dengan nilai 'static'akan mencegah penutupan modal.
Seperti @PedroVagner menunjuk pada komentar, Anda juga dapat lulus {keyboard: false}untuk mencegah penutupan modal dengan menekan Esc.

Jika Anda membuka modal dengan js gunakan: 

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

Jika Anda menggunakan atribut data, gunakan: 

 <button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
    Launch demo modal
 </button>`
— Doguita
sumber
apakah ada cara untuk menjaga latar belakang dapat mendaftarkan klik untuk kontrol lain tetapi tidak menutup modalnya?
— vivekanon
2
@ mystikacid Anda harus mengajukan pertanyaan baru untuk itu. Akan lebih baik untuk membantu Anda dengan masalah Anda dan pengguna lain mencari solusi yang serupa.
— Doguita
— vivekanon
3
Punya masalah sederhana namun menjengkelkan, pastikan Anda menempatkan garis jquery sebelum $('#modal').modal('show');Semoga ini bisa membantu!
— cwiggo
3
cwiggo Anda tidak menggunakan modal $ ('# modal'). modal ('show'); - Anda cukup menggunakan .modal ({backdrop: 'static', keyboard: false}) - tanpa perintah show atau toggle
— TV-C-15
136

Ini yang paling mudah

Anda dapat menentukan perilaku modal Anda, mendefinisikan keyboard-data dan latar belakang data.

<div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static">
— Sushan
sumber
2
Ini adalah satu-satunya hal yang berhasil untuk saya. Melewati opsi di JS secara langsung tidak berhasil untuk saya karena suatu alasan (versi 3.3.7). Jika ada orang lain yang menguatkan, saya mungkin membuka masalah dengan tim Bootstrap.
— dchacke
Pada awalnya, menggunakan versi js tidak bekerja untuk saya juga karena saya mengatur semuanya setelah saya membuka modal. Anda harus melakukan ini "$ ('# modalForm'). Modal ({backdrop: 'static', keyboard: false});" sebelum ini "$ ('# modalForm'). modal ('show');". Tetapi bagi saya, jawaban terbaik adalah dari @ ಅನಿಲ್
— Lucas
Ini berhasil untuk saya. Menempatkan data-backdrop="static"opsi pada definisi modal, bukan tombol pemicu yang membuka modal seperti yang ditentukan dalam jawaban lain, bekerja untuk saya.
— TSmith
99

Anda dapat menggunakan atribut seperti ini: data-backdrop="static"atau dengan javascript: 

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

Lihat jawaban ini juga: Larang jendela modal bootstrap twitter agar tidak ditutup

— Antonis Grigoriadis
sumber
<div id = "modal" class = "modal sembunyikan pudar di" data-keyboard = "false" data-backdrop = "static"> ini adalah jawaban terbaik.
— Kamlesh
34

Dalam aplikasi saya, saya menggunakan potongan kode di bawah ini untuk menunjukkan modal Bootstrap melalui jQuery.

 $('#myModall').modal({
                        backdrop: 'static',
                        keyboard: true, 
                        show: true
                });
— ಅನಿಲ್
sumber
Ini jawaban yang bagus karena kode ini hanya akan berfungsi ketika modal terbuka.
— Deepak Dholiyan
32

Kamu bisa menggunakan

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

untuk mengubah perilaku default.

— David Navarro Astudillo
sumber
Jawaban yang bagus, karena menangani situasi untuk semua modals.
— Haris ur Rehman
1
Dalam bootstrap v4, sintaksnya adalah: $ .fn.modal.prototype.constructor.Constructor.Default.backdrop = 'static';
— Garry English
11

Ada dua cara untuk menonaktifkan klik di luar area model bootstrap untuk menutup modal-

  1. menggunakan javascript

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

  2. menggunakan atribut data dalam tag HTML

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

Lihat ini ::

$(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>
Luaskan cuplikan

— Sachin Sanchaniya
sumber
6

Opsi lain jika Anda tidak tahu apakah modal sudah dibuka atau belum dan Anda perlu mengkonfigurasi opsi modal:

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

Ubah opsi menjadi _config

— cava
sumber
untuk Bootstrap 4 + haruskah itu _setEscapeEvent()bukan .escape()?
— Ivan Bacher
@IvanBacher Bekerja dengan saya menggunakan .escape ()
— Cava
5

Solusi yang bekerja untuk saya adalah sebagai berikut: 

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

latar belakang: menonaktifkan klik di luar acara

keyboard: menonaktifkan acara kata kunci scape

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

coba ini, Selama pengembangan aplikasi saya ... Saya juga menemui masalah bahwa nilai default untuk atribut model => data-keyboard="true", =>data-backdrop="non static"

Semoga ini bisa membantu Anda!

— Deepalakshmi
sumber
3

Coba ini:

<div
  class="modal fade"
  id="customer_bill_gen"
  data-keyboard="false"
  data-backdrop="static"
>
— Vijay Chauhan
sumber
Ini bekerja untuk saya, terima kasih .....
— Ajay Kumar
1

tidak ada solusi yang bekerja untuk saya.

Saya memiliki modalitas syarat dan ketentuan yang saya ingin memaksa orang untuk meninjau sebelum melanjutkan ... default "statis" dan "keyboard" sesuai pilihan membuatnya tidak mungkin untuk menggulir ke bawah halaman karena syarat dan ketentuannya adalah beberapa halaman log, statis bukan jawaban untuk saya.

Jadi alih-alih saya pergi untuk melepaskan ikatan metode klik pada modal, dengan yang berikut ini saya bisa mendapatkan efek yang diinginkan.

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

— RGB
sumber
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
sumber
0

Jika Anda menggunakan @ ng-bootstrap gunakan yang berikut ini:

Komponen

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
    });
  }
}

Templat

<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>

Kode ini diuji pada sudut 9 menggunakan:

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

  2. "bootstrap": "^ 4.4.1",

— Hamfri
sumber
0

Gunakan ini jika Anda ingin menonaktifkan klik luar untuk semua modalnya menggunakan jQuery. Tambahkan skrip ini ke Javascript Anda setelah jQuery.

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

Anda juga dapat melakukan ini tanpa menggunakan JQuery, seperti:

<div id="myModal">

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

Tambahkan css di bawah ini sesuai keinginan Anda lebar layar Anda.

@media (min-width: 991px){
    .modal-dialog {
        margin: 0px 179px !important;
    }
}
— Atul
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.