Bagaimana Anda mengaktifkan fungsi tutup kunci escape di modal Bootstrap Twitter?

132

Saya mengikuti instruksi untuk modal Bootstrap Twitter di halaman dokumentasi utama mereka
dan menggunakan data-keyboard="true"sintaks yang disebutkan tetapi tombol escape tidak menutup jendela modal.
Apakah ada hal lain yang saya lewatkan?

Kode:

<a href="#my-modal" data-keyboard="true" data-toggle="modal">Open Modal</a>

<div class='modal fade hide' id='my-modal'>
  <div class='modal-body'>
    <div>Test</div>
  </div>
</div>
twitter-bootstrap ketekunan
sumber
2
Ini diaktifkan secara default
Adam F

Jawaban:

301

Sepertinya ini adalah masalah dengan bagaimana acara keyup sedang terikat.

Anda dapat menambahkan tabindexatribut untuk modal Anda untuk mengatasi masalah ini:

tabindex="-1"

Jadi kode lengkap Anda akan terlihat seperti ini:

<a href="#my-modal" data-keyboard="true" data-toggle="modal">Open Modal</a>

<div class='modal fade hide' id='my-modal' tabindex='-1'>
    <div class='modal-body'>
    <div>Test</div>
    </div>
</div>

Untuk info lebih lanjut, Anda dapat melihat diskusi tentang masalah ini di github

(Tautan yang diperbarui ke repositori TWBS baru)

Craig MacGregor
sumber
3
Ini mencegah autofokus dari bidang input.
topless
3
Anda juga dapat menambahkan atribut data-keyboard ke div.modal Anda (dan menghilangkannya di penelepon) jika Anda mengaktifkan dialog dari beberapa tempat.
Vitalik Verhovodov
2
Sebagai @nrek tunjukkan di bawah ini - tutup dengan melarikan diri adalah benar secara default, sehingga Anda tidak benar-benar membutuhkan data-keyboard="true"- itu tabindex="-1"yang memungkinkan perilaku
Leo
Saya dapat mengonfirmasi bahwa solusi ini berfungsi di Bootstrap 4. Saya tidak tahu mengapa ini tidak bekerja secara default seperti yang dikatakan dokumen.
Binar Web
Apalagi data-keyboardmilik elemen modal, bukan pengontrol. Ini dapat diuji dengan menyetelnya ke false.
WoodrowShigeru
23

juga jika Anda memohon melalui javascript, gunakan ini:

$('#myModal').modal({keyboard: true})
dennisbot
sumber
15
ini dulunya satu-satunya hal yang harus Anda lakukan, tetapi sekarang Anda juga perlu memastikan bahwa div Anda memiliki atribut 'tabindex = "- 1"'.
Bala Clark
1
Saya hanya perlu mengatur indeks tab.
weltschmerz
@dchacke itu karena properti keyboard default ke true! jadi cukup atur tabindex = '- 1'
nrek
12

tambahkan tabindex="-1"atribut ke modal div

<div id="myModal" class="modal fade" role="dialog" tabindex="-1">

</div>
Trupti
sumber
3

Di sudut saya menggunakan seperti ini:

var modalInstance = $modal.open({                        
 keyboard: false,
 backdrop: 'static',
 templateUrl: 'app/dashboard/view/currentlyIneligibleView.html',
 controller: 'currentlyIneligibleCtrl',
 resolve: {
     data: function () { return param; }
    }
});
  • backdrop: 'static' => Berhenti untuk menutup mengklik di luar
  • keyboard: false => Stop untuk menutup dengan menggunakan escape buttton
Ali Adravi
sumber
-1

Bootstrap 3

Di HTML, atur data-backdropke static dan data-keyboardfalse

Contoh:

<button type="button" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Launch modal</button>

atau 

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

Tes Langsung:

https://jsfiddle.net/sztx8qtz/

Tahu Lebih Banyak: http://budiirawan.com/prevent-bootstrap-modal-closing/

Rashedul Islam Sagor
sumber
Contoh Anda tidak mengaktifkan kunci melarikan diri
Binar Web