CSS / jQuery / 備忘録

予めjQuery、BootstrapのCSS、Javascriptを読み込ませた上、公式サイトのモーダルのデモソースをコピーして貼り付け、動作確認を行ったところ、表示しませんでした。

ブラウザの開発者機能でソースを確認すると、表示している様子。CSSで表示位置が違ったり、何か親ブロックに必要な設定があるのかも確認したが特にそんな情報はなかった。

javascriptの動きに問題でもあるのかと思い動作確認すると、付加されるクラスに問題があった様子。

ボタンクリックし、表示するモーダルがdisplay: noneで消えていた分がブロックに変わり、さらにtransitionでふわっと表示するようなCSSが設定されていますが、これは.fadeについており、表示するときに.inと言うクラスが通常付加されて表示するのですが、なぜか.showと言うクラスが付加されていました。

.inが付加されると.fade.inと言うCSSでopacity: 1になり表示するはずが.fade.showは設定されていないため何も表示しないという流れ。

しょうがないので自分でイベントハンドラを利用して.inを追加するようにして代用しました。

// モーダルが呼び出されたら発動
$('#confirmModal').on('show.bs.modal', function () {
  // 処理
  $(this).addClass('in');
});
//hideメソッドが呼び出されたら発動
$('#confirmModal').on('hide.bs.modal', function () {
  // 処理
  $(this).removeClass('in');
});