bootstrapのmodalを閉じる時に、画面がズレる問題

bootstrapのmodalは便利な機能ですが、閉じると画面がズレる現象が起こりました。

ブラウザのデバッガで調査を行うと、どうもbodyタグにpadding-rightが追加されているようです。

そんな処理を書いた覚えがありません。

ネットで調べてみると同じような問題に遭遇している方を発見しました。

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

どうやらスクロールバーの挙動が関係しているようです。

modalを開く時にスクロールバーを隠し、その分bodyにpaddingを設定し、閉じる時に戻すという処理をしています。

.modal-open {
  overflow: auto;
}

上記のコードで上書きしてやり、modalが開く時にスクロールバーを隠さないようにします。

続いて戻す時の処理をコメントアウトします。

bootstrap.js

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)
}

今回の現象は自分でhtmlやbodyタグにoverflowプロパティを設定しているから発生しているようです。

通常は発生しないので、お困りの方はお試しください。