137

メインのドキュメントページにあるTwitterBootstrapモーダル の指示に従い、前述
の構文を使用しましたdata-keyboard="true"が、Escキーでモーダルウィンドウが閉じません。
他に足りないものはありますか？

コード：

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

6 に答える 6

321

これは、キーアップイベントがどのようにバインドされているかに関する問題のようです。

tabindexこの問題を回避するために、モーダルに属性を追加できます。

tabindex="-1"

したがって、完全なコードは次のようになります。

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

詳細については、githubでこの問題に関するディスカッションをご覧ください。

（新しいTWBSリポジトリへのリンクを更新）

于 2012-09-27T21:48:43.390 に答える
25

また、 javascript 経由で呼び出す場合は、次を使用します。

$('#myModal').modal({keyboard: true})
于 2012-10-05T23:11:49.143 に答える
0

let モーダル = []

        $(document).keyup(function(e) {
            if((e.key=='Escape' || e.key=='Esc' || e.keyCode==27) && modals.length) {
                $(".modal[modal='" + modals.pop() + "']").modal('hide')
            }
        })
        
        $(".modal").on("shown.bs.modal", e => {
            const id = modals.length
            modals.push(id)
            $(e.target).attr("modal", id)
        })
于 2022-02-11T10:35:49.350 に答える