電話機のボタンを閉じるブートストラップモーダルを閉じる

Question

私はブートストラップのサンプルコードから取ったシンプルなモーダルを持っています。

<!-- Button trigger modal --> 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
    Launch demo modal 
</button> 

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     ... 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div> 

私はそれがモバイルデバイス上でページ全体を占めているため、電話でのバックボタンでモーダルを閉じることができるようにしたい

、および上部にある「X」を検索：それはこのようなものです右は非常に便利ではありません。私はドキュメンテーションを見てみましたが、キーボード上のEscapeキーでモーダルを閉じるオプションと、モバイルデバイスにはそのようなソリューションはありません。誰も私を助けることができますか？

Answer 1

私は単純Xまたは閉じるボタンでモーダルを閉じ推薦しますが、経由でイベントに耳を傾けることができる必要があります：あなたは、ナビゲーションイベントとstate.directionに耳を傾ける必要がある

$(window).on("navigate", function (event, data) { 
    var direction = data.state.direction; 
    if (direction == 'back') { 
    // do something 
    } 
    if (direction == 'forward') { 
    // do something else 
    } 
}); 

。

モーダルの静的ヘッダーにXを残すことについて考えましたか？内容はスクロール可能です。