ブートストラップ3閉じるブラウザの戻るボタンを押したときのモーダル

Question

ブラウザの戻るボタンまたはモーダル内の閉じるボタンを押して、ブートストラップ3を使用して動作するモーダルページを作成したいだけです。しかし問題がある。 google.comから始め、このモーダルページに行き、次に「モーダル」を押してみましょう。ボタンを押して、ブラウザを戻すボタン、それはモーダルを閉じます、私はもう一度戻るボタンを押すと、それはgoogle.com（すべてが良いです）に私を連れて行くでしょう。しかし、今度はモーダルページを開いて、代わりに「閉じる」ボタンを使用してモーダルを閉じます。しかし今、私はgoogle.comに戻るために2回、バックボタンを押す必要があります。モーダルのクローズボタンを10xのように開いてモーダルを閉じると私はgoogle.comのページに戻るためにブラウザを10回以上押し戻さなければならないことが分かりました。この問題を解決するには？ TIA

<!--html, bootstrap 3.2.0--> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"> 
<div class="modal-dialog"> 
<div class="modal-content"> 
    <div class="modal-body"> 
    <p>If you press the web browser's back button not the modal's "close" button, the modal will close and the hash "#myModal" will be removed for the URL</p> 
    </div> 
    <div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div> 
</div> 
</div> 
</div> 

<!--jquery--> 
$('#myModal').on('show.bs.modal', function (e) { 
    window.history.pushState('forward', null, '#modal'); 
}); 

$('#myModal').on('hide.bs.modal', function (e) { 
    //pop the forward state to go back to original state before pushing the "Modal!" button 
}); 

$(window).on('popstate', function() { 
    $('#myModal').modal('hide'); 
}); 

jsfiddle source

Answer 1

私は解決策を見つけました。他の優雅なソリューションを自由に投稿してください。

$('#myModal').on('hide.bs.modal', function (e) { 
    if(location.hash=='#modal')window.history.back(); 
}); 

$(window).on('popstate', function (event) { //pressed back button 
    if(event.state!==null)$('.modal').modal('hide'); 
}); 

Answer 2

次のコードを使用すると、開いているモーダルウィンドウを削除し、誤ってブラウザの前のページに移動しないようにすることができます。

//When ever the modal is shown the below code will execute. 
$(".modal").on("shown.bs.modal", function() { 
    var urlReplace = "#" + $(this).attr('id'); 
    history.pushState(null, null, urlReplace); 
    }); 

    // This code gets executed when the back button is clicked, hide any/open modals. 
    $(window).on('popstate', function() { 
    $(".modal").modal('hide'); 
    }); 

Answer 3

オンボタンクリックポップアップが表示されます。

$(document).ready(function(){ 
     $(".popup-btn").click(function() { 
      location.hash = "popup"; 
      $(".popup-panel").show(); 
     }); 
}); 

場所で、それは隠しなるだろう変更：

$(window).bind('hashchange', function() { 
     if (location.hash == null || location.hash == "") { 
      $(".popup-panel").hide(); 
     } 
});