Larang jendela modal Bootstrap Twitter dari penutupan

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?

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

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.

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

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

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.

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.

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

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.

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.

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

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.

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>

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.

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.

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

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

Melakukan itu sangat mudah saat ini. Cukup tambahkan:

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

Di pembagi modal Anda.

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.

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

Untuk memperbarui keadaan latar belakang di Bootstrap 4.1.3 setelah modal ditampilkan, Kami menggunakan baris berikut dari plugin Bootstrap-Modal-Wrapper . Referensi kode Repositori Plugin .

$("#yourModalElement").data('bs.modal')._config.backdrop = (true : "static");