Bootstrap内でmodal内からajaxリクエストした場合にmodalをhideにしても消えない場合の対処

modal内からajaxリクエストした場合にmodalが残ってしまう事象が発生。
modalといってもフォームは消えてmodalの背景のみ残ってしまい操作が出来なくなる。
似たようなところでハマった人は結構いるっぽい。

<a href="http://stackoverflow.com/questions/10466129/how-to-hide-bootstrap-modal-from-javascript">How to hide Bootstrap modal from javascript?</a>stackoverflow.com

<a href="http://stackoverflow.com/questions/10495421/how-to-get-twitter-bootstrap-modal-to-close-after-initial-launch">How to get twitter bootstrap modal to close (after initial launch)</a>stackoverflow.com

色々とググったが上記含めあまり良い結果は得られず試行錯誤したところこれで動いた。

[追記] どうやらこれらの事象はbootstrapのmodalに関するjsが読み込まれないため発生していた模様。
下記のようなことをせずともこのようにすることでキチンと動いた！

# app/assets/javascripts/hogehoge.js.coffee

$ ->
  $('.modal').modal()
  $('.modal').modal('hide')

modalを明示的に呼び出しその後にmodalにhideオプションを付ける。
こうすることでmodalが確実にhideオプションで非表示化される。

なお、もしこれで動かないようなら下記のようにbootstrapが適用している要素を個別に消すことで対応が出来る。

# もしajaxリクエスト後に非表示にするならこちら
## jsバージョン
$(function() {
  return $('#form').on('ajax:success', function(e, data, status, xhr) {
    return $('div.modal-backdrop.in').remove();
  });
});

## coffeeバージョン
$ ->
  $('#form').on 'ajax:success',  (e, data, status, xhr) ->
    $('div.modal-backdrop.in').remove()

# もしページ読み込みと同時に確実に非表示にするならこちら
## jsバージョン
$(function() {
  return $('div.modal-backdrop.in').remove();
});

## coffeeバージョン
$ ->
  $('div.modal-backdrop.in').remove()

bodyの閉じタグ直前に悪さ（？）をしているdiv.modal-backdrop.inを見つけたのでこいつを削除してしまうことで解決。

ていうかほぼrails関係ないw

追記

このままだと画面スクロールができないことに気付く。
原因はやはりmodal表示の際に残存しているclassによるもの。

body class="modal-open"

どうやらmodal-openがスクロールを制御している。
これをブラウザで削除したところ動いた。これもjsで削除すればOK。

## 以下を追記
  $('body').removeClass('modal-open')

恐らくajaxで処理した場合に本来はmodal('hide')で操作できるはずのDOMが無くなっている？この辺りはまた調べる。