2013-04-09 【Twitter Bootstrap2.3.1】モーダルを表示された状態でスクロールした時にページ全体がスクロールするのを止める TwitterBootstrap 問題 モーダルが表示されている時はページ全体をスクロールさせたくない。 解決方法 2.3未満の場合はcssだけで完了。 body.modal-open{ overflow: hidden; } 2.3以降はモーダルが表示された時にbodyに.modal-openがつかないのでjQueryで処理する。 $(".modal").on("shown", function(){ $("body").addClass("modal-open"); }); $(".modal").on("hidden", function(){ $("body").removeClass("modal-open"); }); 参考 P
「Magnific Popup」は、可変ウィンドウに対応した高機能なモーダルを実装できるjQueryプラグインです。 画像をLight box風に表示するだけでなく、ギャラリーや動画のモーダル表示にも対応しており、さまざまなエフェクトも用意されています。 また、スマートフォンで厄介なモーダル上のformの動作も問題なく動作しますので(Android 2.3/4.0/4.1/4.2で検証)、レスポンシブWebデザインで役立ってくれそうですね。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、Magnific Popupを配布ページからダウンロードしましょう。Magnific Popupはgithubで公開されており、ページ右下の「Download ZIP」というボタンからダウンロードします。 最低限必要なファイルはdistフォルダの「jquery
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く