Larang jendela modal Bootstrap Twitter dari penutupan


549

Saya membuat jendela modal menggunakan Twitter Bootstrap. Perilaku default adalah jika Anda mengklik di luar area modal, modal akan secara otomatis ditutup. Saya ingin menonaktifkan itu - yaitu tidak menutup jendela modal ketika mengklik di luar modal.

Bisakah seseorang membagikan kode jQuery untuk melakukan ini?


1
Anda mungkin memiliki alasan yang sah untuk melakukan ini (dan kemungkinan ada banyak lainnya). Namun, perlu dicatat bahwa secara umum, pertimbangan UX akan menyarankan hal ini - sebagian besar pengguna berharap bahwa mengklik modal akan membawa konten "di bawah" ke "depan".
Trevor

32
@ Trevor Itu seperti kebalikan dari modal .
Rawling

11
bagaimana jika, jika ada halaman di latar belakang yang hanya dapat diaktifkan hanya jika pengguna masuk terlebih dahulu. Dengan mengklik tombol modal Ok pengguna akan diarahkan ke halaman login. Jika pengguna dapat mengklik saja, ini berarti bahwa pengguna melewati halaman login dan hanya mengakses halaman tanpa login. All Hell Break Loose
jumper rbk

5
@ Trevor Saya tidak melihat bukti sama sekali untuk mendukung klaim Anda.
1252748

Fitur ini masuk akal dalam skenario ketika pengguna harus mengisi banyak bidang formulir di modal. Jika pengguna secara tidak sengaja mengklik di luar modal, maka semua detail yang dimasukkan akan hilang; maka mereka harus mengaktifkan kembali modal dan mengisi ulang ladang. Fitur ini akan menghindari iritasi semacam itu.
mickmackusa

Jawaban:


692

Saya yakin Anda ingin mengatur nilai latar belakang menjadi statis . Jika Anda ingin menghindari jendela untuk menutup saat menggunakan Esckunci, Anda harus menetapkan nilai lain.

Contoh:

<a data-controls-modal="your_div_id"
   data-backdrop="static"
   data-keyboard="false"
   href="#">

ATAU jika Anda menggunakan JavaScript:

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

7
@ user1296175 Apa kode akhir Anda untuk mencapai ini? Saya ingin melakukan hal yang sama.
AlphaMale

4
Terima kasih @nobita, tambahkan data-backdrop = "static", lakukan triknya! Dokumen bootstrap Twitter buruk :(
Blue Smith

2
Periksa jawaban dari @@ Varun Chatterji dan sertakan ini pada definisi modal Anda
Leandro

1
nonaktifkan klik luar untuk semua modals dengan satu baris js: $ .fn.modal.Constructor.DEFAULTS.backdrop = 'statis';
Lukas Liesis

1
Untuk pengguna Angular: var modalInstance = $ modal.open ({templateUrl: 'modalTemplate.html', controller: 'modalController', backdrop: 'static',});
Alexandr

310

Cukup atur backdropproperti ke 'static'.

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

Anda mungkin juga ingin mengatur keyboardproperti falsekarena itu mencegah modal dari ditutup dengan menekan Esctombol pada keyboard.

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

myModal adalah ID dari div yang berisi konten modal Anda.


6
Yap, ini adalah jawaban yang paling bersih dan paling sederhana (karena ia menghindari penambahan atribut data) Untuk referensi, backdropdan keyboarddisebutkan di sini dalam dokumentasi mereka di bawah bagian Opsi .
Jesse Dupuy

Apakah data atribut sesuatu yang harus dihindari? Mohon panduan tentang ini.

@GopalAggarwal: Tergantung pada bagaimana Anda mengatur modal. Jika Anda mengaitkan modal ke beberapa tag anchor, maka menggunakan atribut data mungkin masuk akal. Tetapi ketika hanya ada satu modal per tag, saya akan pergi dengan parameter skrip di mana setiap perilaku terlihat di satu tempat.
Nirmal

7
Juga untuk menghindari tampilan modal segera lulus dalam acara: false
ClearCloud8

214

Anda juga dapat memasukkan atribut-atribut ini dalam definisi modal itu sendiri:

<div class="modal hide fade" data-keyboard="false" data-backdrop="static">

4
Yap, ini adalah jawaban terbersih dan paling sederhana (karena ia bekerja dengan menambahkan atribut data). Untuk referensi, latar belakang dan keyboard disebutkan di sini dalam dokumentasi mereka di bawah bagian Opsi.
floww

Jika Anda meluncurkan modal pada pemuatan halaman, ini adalah cara terbaik untuk menghapus opsi penutupan lainnya.
santa

46

Jika Anda sudah menginisialisasi jendela modal, maka Anda mungkin ingin mengatur ulang opsi dengan $('#myModal').removeData("modal").modal({backdrop: 'static', keyboard: false})untuk memastikan itu akan menerapkan opsi baru.


1
Ini membantu saya. Setelah mengatur "latar belakang: 'statis'" pengguna masih dapat menutup modal dengan klik; tampak seperti bug, tetapi ini berhasil!
Omar

7
Untuk saat ini: $ ('# modal'). RemoveData ('bs.modal'). Modal ({backdrop: 'static', keyboard: false});
D3VELOPER

34

Override acara Dialog Bootstap 'sembunyikan' dan hentikan perilaku defaultnya (untuk membuang dialog).

Silakan lihat cuplikan kode di bawah ini:

   $('#yourDialogID').on('hide.bs.modal', function(e) {

       e.preventDefault();
   });

Ini berfungsi dengan baik dalam kasus kami.


2
lalu, bagaimana cara mengembalikannya?
sertaconay

3
Cukup elegan. thx :) Dan @sertaconay hanya membuat variabel boolean (misalnya) yang akan diperiksa untuk memutuskan apakah Anda ingin mencegah default
Nimrod Yonatan Ben-Nes

1
satu-satunya opsi di sini yang bekerja setelah modal adalah opend
ask_io

2
Ini adalah solusi yang sempurna jika Anda ingin memiliki kontrol yang lebih baik ketika modalnya dapat ditutup dan ketika tidak.
Curos

33

Ya, Anda bisa melakukannya seperti ini:

<div id="myModal"  tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel"
     aria-hidden="true"
     data-backdrop="static"  data-keyboard="false">

Ini sempurna untuk kasus di mana modal dideklarasikan dalam html, dan hanya dibuka melalui javascript - yaitu tidak ada tautan ke sana. Terima kasih!
hgolov

22

Seperti jawaban @ AymKdn, tetapi ini akan memungkinkan Anda untuk mengubah opsi tanpa menginisialisasi ulang modal.

$('#myModal').data('modal').options.keyboard = false;

Atau jika Anda perlu melakukan banyak opsi, JavaScript withsangat berguna di sini!

with ($('#myModal').data("modal").options) {
    backdrop = 'static';
    keyboard = false;
}

Jika modal sudah terbuka, opsi ini hanya akan berlaku pada saat modal dibuka berikutnya.


stackoverflow.com/questions/16030448/... Tapi saya tidak suka solusi ini
Victor

14

Tambahkan saja dua hal ini

data-backdrop="static" 
data-keyboard="false"

Ini akan terlihat seperti ini sekarang

<div class="modal fade bs-example-modal-sm" id="myModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">

Ini akan menonaktifkan tombol escape dan juga klik di mana saja dan bersembunyi.


Nasihat ini diberikan bertahun-tahun sebelumnya.
mickmackusa

11

Anda dapat menonaktifkan perilaku klik-untuk-tutup latar belakang dan menjadikan ini default untuk semua modals Anda dengan menambahkan JavaScript ini ke halaman Anda (pastikan itu dijalankan setelah jQuery dan Bootstrap JS dimuat):

$(function() {
    $.fn.modal.Constructor.DEFAULTS.backdrop = 'static';
});

6

Seperti yang dikatakan D3VELOPER, kode berikut mengatasinya:

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

Saya menggunakan jquery & bootstrap dan removeData('modal')tidak berfungsi.


4

Yang terbaik yang saya temukan adalah menambahkan kode ini ke tautan

<!-- Link -->
<a href="#mdl" role="button"  data-backdrop="static" data-keyboard="false" data-toggle="modal" id_team="" ></a>
<-- Div -->
<div id="mdl" class="modal hide fade" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static"></div>

2

Jika ada yang datang ke sini dari Google mencoba mencari cara untuk mencegah seseorang dari menutup modal, jangan lupa bahwa ada juga tombol tutup di kanan atas modal yang perlu dihapus.

Saya menggunakan beberapa CSS untuk menyembunyikannya:

#Modal .modal-header button.close {
    visibility: hidden;
}

Perhatikan bahwa menggunakan "display: none;" akan ditimpa ketika modal dibuat, jadi jangan gunakan itu.


Tidak bisakah kamu juga hanya menghapus tombol dari modal-header?
foop

Terkadang bermanfaat untuk menggunakan CSS daripada mengubah HTML.
Drew

2

Jika Anda ingin menonaktifkan backdrop click closingfitur secara kondisional . Anda dapat menggunakan baris berikut untuk mengatur backdropopsi staticselama runtime.

Bootstrap v3.xx

jQuery('#MyModal').data('bs.modal').options.backdrop = 'static';

Bootstrap v2.xx

jQuery('#MyModal').data('modal').options.backdrop = 'static';

Ini akan mencegah model yang sudah instantiated dengan backdropopsi disetel ke false( perilaku default ), dari penutupan.


2

Anda dapat mengatur perilaku default dari modal popup dengan menggunakan baris kode di bawah ini:

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

seperti memberi +1 pada metode ini, saya tidak ingin opsi itu untuk semua modals.
tsohr

2

Melakukan itu sangat mudah saat ini. Cukup tambahkan:

data-backdrop="static" data-keyboard="false" 

Di pembagi modal Anda.


Nasihat ini diberikan bertahun-tahun sebelumnya di halaman yang sama.
mickmackusa

1

Nah, ini solusi lain yang mungkin dicari beberapa dari kalian (seperti saya dulu)

Masalah saya mirip, kotak modal ditutup sementara iframe yang saya miliki di dalam memuat, jadi saya harus menonaktifkan modal memberhentikan sampai Iframe selesai memuat, lalu aktifkan kembali.

Solusi yang disajikan di sini tidak berfungsi 100%.

Solusi saya adalah ini:

showLocationModal = function(loc){

    var is_loading = true;

    if(is_loading === true) {

        is_loading  = false;
        var $modal   = $('#locationModal');

        $modal.modal({show:true});

        // prevent Modal to close before the iframe is loaded
        $modal.on("hide", function (e) {
            if(is_loading !== true) {
                e.preventDefault();
                return false
            }
        });

        // populate Modal
        $modal.find('.modal-body iframe').hide().attr('src', location.link).load(function(){

            is_loading = true;
     });
}};

Jadi saya sementara mencegah Modal dari penutupan dengan:

$modal.on("hide", function (e) {
    if(is_loading !== true) {
        e.preventDefault();
        return false
    }
});

Tapi itu adalah is_loading var yang akan mengaktifkan kembali penutupan setelah Iframe telah dimuat.


1
<button type="button" class="btn btn-info btn-md" id="myBtn3">Static 
Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal3" role="dialog">
<div class="modal-dialog">
  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">×</button>
      <h4 class="modal-title">Static Backdrop</h4>
    </div>
    <div class="modal-body">
      <p>You cannot click outside of this modal to close it.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-
      dismiss="modal">Close</button>
    </div>
   </div>
  </div>
</div>
   <script>
    $("#myBtn3").click(function(){
     $("#myModal3").modal({backdrop: "static"});
    });
   });
  </script>

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.