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>

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)


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

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>

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

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.