web-dev-qa-db-ja.com

bootstrap modalが開いている場合に本文コンテンツのスクロールを防ぐ方法

私はAngular= UI Bootstrap Modal box 。を使用しています。モーダルもスクロールします。

オーバーフローを設定できます：bodyタグに隠され、これにより問題が解決します。しかし、モーダル内に多くのコンテンツがある場合、表示するにはスクロールが必要です。このスクロールはモーダル内にあるべきではありません。つまり、ページスクロールを使用する場合、モーダルはコンテンツのみではなくスクロールするだけです。 ここにプランカー

angularjstwitter-bootstrapangular-ui
20
Neil

UI Bootstrapを使用して、実際に同じ問題に直面していますが、回避策を思いつきました。モーダルを開いたら、クラス（.ovh）ボディに、オーバーフローを非表示に設定します。モーダルを閉じる/閉じると、そのクラスが削除されるため、再びスクロールできるようになります。

ここであなたのフィドルのフォークを参照してください： http://plnkr.co/edit/OIJ2ee5Ph0ELgkKPrSbr?p=preview

注は、単にデモンストレーションの目的で、index.htmlにクラスを配置したことに注意してください。に加えて$documentコントローラー定義で、angularによって提供される参照を使用します。

10
martinczerwi

Dreamhighの答えを少し修正したところ、うまく機能しました。位置の追加が含まれていました。iOSデバイス用に修正されました。

body.modal-open {
    position: fixed;
    overflow: hidden;
}

さらに、ビューポートを調整してユーザーのスケーリングを無効にし、入力が自動的にズームされず、ボディコンテンツにスクロールバーが表示されないようにします。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

この投稿の功績： ブートストラップ3：フォームフォーカス後のiPhoneの水平スクロールバー

これらの2つの変更により、angularjsモーダルフォームをiOSで適切に動作させることができました。

12
Derek

Angular JSとUI Bootstrapを使用している場合。これを機能させるために必要なことは次のとおりです。私の状況は少し異なっていました。その後、そのモーダルに別のモーダルをポップするボタンがあり、2番目のモーダルが閉じられると、最初のモーダルはスクロールしなくなります。

.modal.in {
  overflow-x: hidden;
  overflow-y: auto;
}
6
Grandizer

CSSの下に置くだけで、モーダルポップアップが開かれるたびにボディスクロールが非表示になります。 Angular UI Bootstrapを使用しています。

.modal-open {
  overflow: hidden !important;
  position: relative
}
3
Prashant

Overflow：hiddenを追加すると、背景ページのスクロールは非表示になります。ただし、モーダルスクロールはページスクロールとして表示され、モーダルはスクロールするように設定されます。

body.modal-open {
    overflow: hidden;
}
2
user927026

bootstrap jsのコメント行が問題の原因になります。この行をコメントすることができます。

  this.backdrop(function () {
  var transition = $.support.transition && that.$element.hasClass('fade')

  if (!that.$element.parent().length) {
    that.$element.appendTo(that.$body) // don't move modals dom position
  }

  that.$element
    .show()
    .scrollTop(0)

  if (that.options.backdrop) that.adjustBackdrop()
  that.adjustDialog()

  if (transition) {
    that.$element[0].offsetWidth // force reflow
  }

  that.$element
    .addClass('in')
    .attr('aria-hidden', false)

  //that.enforceFocus()
0
fatih kiymet

私にとっては、ダイアログが閉じられたときにページがスクロールしたため、ui-bootstrap-tpls.jsファイルを修正しました。実際の問題は、モーダルを閉じるときに、removeModalWindowがパラメーター 'modalInstance'および 'modalWindow.value.modalOpener'で呼び出されることです。

2番目のパラメーターは、モーダルウィンドウをトリガーした要素に焦点を合わせるために使用されています。 'dismiss'および 'close function'の2番目のパラメーターを削除するだけで、ページスクロール効果が解決されます。

「removeModalWindow（modalInstance、modalWindow.value.modalOpener）」は「removeModalWindow（modalInstance）」になります

0
Stephen Howe