*

《解決》Twitter Bootstrapでmodalを使うと画面がずれる問題

公開日: : bootstrap ,


twitter bootstrap

バージョン:BootStrap-3.3.2

Twitter BootStrapでModal(背景が暗くなって、ポップアップが浮かび上がる機能)を使うと、画面全体が少し左にずれる問題があります。

このままだとModalを呼ぶたびに画面がカチャカチャ変わってとてもかっこ悪い。

原因はModalを呼び出すと右側のスクロールバーが消えて、表示できる画面の幅が変わるためです。

この問題を解決するためにはCSSへのコード追加とBootStrap.jsの修正です。

CSSへ追加

下記を読み込んでいるCSSに追記してください。デフォルトだとmodal-openクラスのoverflow-y要素がhiddenになっているのですが、これをいれることでスクロールバーが消えない、つまり幅ずれがおきなくなります。

.modal-open {
overflow: auto;
}

bootstrap.jsを修正

おそらくこの問題を解決するために中途半端に混入されているpadding-rightの自動挿入なのですが、これをコメントアウトします。

Modal.prototype.setScrollbar = function () {
//var bodyPad = parseInt((this.$body.css(‘padding-right’) || 0), 10)
//if (this.bodyIsOverflowing) this.$body.css(‘padding-right’, bodyPad + this.scrollbarWidth)
}

photo: http://www.hongkiat.com/blog/twitter-bootstrap/

Ads by Google

Ads by Google

関連記事

WordPress cherry frameworkでカルーセルを使ったときにモバイルでスクロールしない問題を解決

カルーセル(Carousel)という言葉が一般的かわかりませんが、一定の画面内で画像をス

記事を読む

Ads by Google

Ads by Google

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Ads by Google

Ads by Google
新着記事をRSSで受けとる
PAGE TOP ↑