bootstrap

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

Pocket

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

-bootstrap
-,

© 2021 みる米技術部 Powered by AFFINGER5