Bootstrap：Modal表示時に左側にずれる件 - IT業界のすみっこ暮らし

スクロールバーの対応のためか、Modal表示時に"padding-right:17px"の値が追加され、左側にずれる件の対策。

CSSで対応

Modal表示時にDomが左側にずれる場合、以下の設定を追加する

①bodyのスタイル修正

■ 原因

<body class="modal-open" style="padding-right: 17px;">★

■ 対策

.modal-open {
    padding-right: 0px !important;
}

②Modalのスタイル修正

■ 原因

<div class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: block; padding-right: 17px;">★

■ 対策

.modal {
    padding-right: 0px !important;
}

JSとCSSを両方修正する方法

tech.mirukome.com

CSS

.modal-open {
    overflow: auto;
}

JavaScript

Modal.prototype.setScrollbar = function () {
  // var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10) ★コメントアウトする
  this.originalBodyPad = document.body.style.paddingRight || ''
  // if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)　★コメントアウトする
}

後者が処理としては綺麗（無駄な設定が入らない）な気はするけど、JSまでいじるのは気が引けたのでCSSで対応した。

追記(2017.03.16)

上記のCSS対応をしたとき、一つのモダルを開いたり閉じたりする場合は問題ないけど、モダルからまたモダルを呼び出す場合はモダルのClose時にまたpadding-right:17pxが適用されてしまうことに気付いたので、仕方なくモダルを閉じるときのイベントに以下の設定を追加した。

モダルが開かれる画面用のjs

$('#myModalId').on('hidden.bs.modal', function () {
                    $('body').css('padding-right', '0px');
                })