132

Ho seguito le istruzioni per il Bootstrap modale di Twitter nella loro pagina di documentazione principale
e ho usato la data-keyboard="true"sintassi menzionata, ma il tasto Esc non chiude la finestra modale.
C'è qualcos'altro che mi manca?

Codice:

<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

— perseveranza
fonte

2

Questo è abilitato di default

— Adam F,

301

Sembra che questo sia un problema con il modo in cui l'evento keyup viene associato.

Puoi aggiungere l' tabindexattributo al tuo modale per aggirare questo problema:

tabindex="-1"

Quindi il tuo codice completo dovrebbe assomigliare a questo:

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

Per maggiori informazioni è possibile visualizzare la discussione su questo problema su github

(Link aggiornato al nuovo repository TWBS)

— Craig MacGregor
fonte

3

Questo però impedisce all'autofocus di inserire campi.

— topless,

3

È inoltre possibile aggiungere l'attributo della tastiera dei dati al proprio div.modal (e ometterlo nei chiamanti) se si richiama la finestra di dialogo da più posizioni.

— Vitalik Verhovodov,

2

Come sottolinea @nrek di seguito - chiudere con escape è vero per impostazione predefinita, quindi non è strettamente necessario data-keyboard="true"- è ciò tabindex="-1"che abilita il comportamento

— Leo,

Posso confermare che questa soluzione funziona in Bootstrap 4. Non so perché non funzioni di default come dicono i documenti.

— Binar Web,

Inoltre, data-keyboardappartiene all'elemento modale, non al controller. Questo può essere testato impostandolo su false.

— Woodrow Shigeru il

23

anche se stai invocando tramite javascript, usa questo:

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

— dennisbot
fonte

15

questa era l'unica cosa che dovevi fare, ma ora devi anche assicurarti che il tuo div abbia un attributo 'tabindex = "- 1"'.

— Bala Clark,

1

Ho dovuto solo impostare l'indice delle schede.

— weltschmerz,

@dchacke questo perché la proprietà della tastiera è predefinita su true! quindi imposta tabindex = '- 1'

— nrek il

12

aggiungi tabindex="-1"attributo al div modale

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

</div>

— Trupti
fonte

3

In angolare sto usando in questo modo:

var modalInstance = $modal.open({                        
 keyboard: false,
 backdrop: 'static',
 templateUrl: 'app/dashboard/view/currentlyIneligibleView.html',
 controller: 'currentlyIneligibleCtrl',
 resolve: {
     data: function () { return param; }
    }
});

fondale: 'statico' => Interrompi per chiudere facendo clic all'esterno
tastiera: false => Interrompi per chiudere utilizzando il pulsante di escape

— Ali Adravi
fonte

-1

Bootstrap 3

In HTML, basta impostare data-backdropsu statico e data-keyboardsu falso

Esempio :

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

o

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

Test dal vivo:

https://jsfiddle.net/sztx8qtz/

Per saperne di più: http://budiirawan.com/prevent-bootstrap-modal-closing/

— Rashedul Islam Sagor
fonte

Il tuo esempio non abilita la chiave di escape

— Binar Web

Come si abilita la funzionalità di chiusura della chiave di escape in un Twitter Bootstrap modale?

Bootstrap 3

Esempio :

Test dal vivo: