bootstrapのmodalをブラウザの「戻る」で閉じる方法

便利だったのでメモします。

#方法

modalが表示された時
→ 履歴にmodalのid付きのurlを追加します

modalが閉じられた時
→ urlにmodalのidがあったら、ブラウザの「戻る」を起動します

「戻る」ボタンが押された時
→ modalを閉じます

sample.js

$(function() {

  // modalが表示された時
  $(".modal").on("shown.bs.modal", function() {
    var urlReplace = "#" + $(this).attr('id')
    history.pushState(null, null, urlReplace)
  });

  // modalの閉じる機能が動作した時
  $(".modal").on("hidden.bs.modal", function () {
    if(location.hash == "#" + $(this).attr('id')) {
      history.back()
    }
  })

  // 「戻る」ボタンが押された時
  $(window).on('popstate', function() { 
    $(".modal").modal('hide')
  })

})

modalを重ねて使わないページでは、大体期待通り動作すると思います。
もっと良い書き方がありましたら、教えて頂けると嬉しいです。

以上です。

#参考
[backbutton close bootstrap modal]
(https://gist.github.com/thedamon/9276193)
[How to handle the modal closing event in Twitter Bootstrap?]
(http://stackoverflow.com/questions/12319171/how-to-handle-the-modal-closing-event-in-twitter-bootstrap)
[javascriptまとめ]
(http://www.red.oit-net.jp/tatsuya/js/location.htm)