ブートストラップモーダル：背景がトグルでトップにジャンプ

110

モーダルで問題があります。ページ上にモーダルを切り替えるボタンがあります。モーダルが表示されると、ページはトップにジャンプします。

解決策などを見つけるためにできることはすべてやったが、本当に迷っている。

編集：

私も試してみまし$('#myModal').modal('show');たが、まったく同じ効果があります。

javascript  jquery  css  twitter-bootstrap  twitter-bootstrap-3 
— FooBar
ソース
こんにちは、ベンニ。はい、私は反抗的です。私も試してみました：$（ '＃myModal'）。modal（ 'show'）; しかし、まったく同じ効果があります。
— FooBar 2014
1
このヘルプは、あなた、同じ問題ことができます。stackoverflow.com/questions/12894570/...
— マーク・
@Mark、以下の私の回答を参照してください...
— Ravimallya
どこかをクリックwindowするとモーダルが起動することに気づきました。意外と奇妙に思えます。buttonvia devtools を削除しましたが、ページのどこかをクリックしてもまだモーダルウィンドウが開きました。それは望ましい動作でしたか？モーダルクリックイベントに適切なセレクターがないのでしょうか。
— dward

回答:

174

モーダルが開くと、modal-openクラスが<body>タグに設定されます。このクラスoverflow: hidden;は本体に設定されます。このルールをスタイルシートに追加して、bootstrap.cssスタイルをオーバーライドします。

body.modal-open {
    overflow: visible;
}

これで巻物は定位置に留まるはずです。

— pstenstrm
ソース
@pstenstrm、私は疑問があります。.modal-openクラスのcssをオーバーライドするように指示しました。しかし、余分な終了divがあり、私の答えで、解決策でクラスをオーバーライドしていない場合はどうなりますか？2つの余分なdivを削除した後、正常に動作します。bs modalが.modal-backdrop divを追加すると、余分な終了タグのために閉じる必要がある場所で混乱します。
— Ravimallya 2014
4
私にとってはうまくいきません、私はiframe内にモーダルを持っていて、それが上にスクロールしています...何かアイデアはありますか？
— Cabuxa.Mapache 2014
5
これで解決しました。私の問題の根本を追加したのは、「body {height：100％}」でした。
— PeteG 14
23
私のために働いていません。開いているバニラモーダルが.modal('show')あり、それでもページの上部にスクロールします。ブートストラップv3.2.0
— MandM
6
私はposition: inheritこのクラスに追加する 必要がありましたが、その後は魅力のように働きました。
— adrian3martin 2017
28

タグ付きのモーダルを呼び出す場合。'＃'をhref属性から削除してみてください。データ属性でモーダルを呼び出します。

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
— ゴカン
ソース
あなたがそこに投稿したように私はそれを正確に開きます。リンクをチェックしてください
— FooBar
5
「<button>」ではなく<a>を使用すると、私の場合のように、オブジェクト上でマウスカーソルを移動すると、「指のボタン」アイコンが失われます。これを克服するために、私はそうしました：... href = "＃mai_modal_id" data-toggle = "modal" ...そして、data-targetを使用しませんでした
— pagurix
3
@pagurix-あなたのコメントは私のシナリオに最適でした。
— AlfredBr 2016年
@pagurixはコメントを別の答えとして書くべきだと思います。助けになったものだけ。いいぞ！
— Vibhor Dube、2017
12 
$('the thing you click on').click(function ($e) {
            $e.preventDefault();
});

これは、上部にあるスクロールバーを停止するのに役立ちます。

— ゲオルギ・ミルチェフ
ソース
5

おそらく、コードのどこかにネストされたモーダルで作業しています：

body.modal-open {
    overflow: visible;
    position: absolute;
    width: 100%;
    height:100%;
}

私にとっては、位置、高さ、オーバーフローの組み合わせでした。

— デニスハイデン
ソース
4

特定のエラーは表示されませんが、HTML構文を確認することをお勧めします。

ソースを使用した小さなテストで、次のようなエラーが発生します

行127、列34：閉じられていない要素div。

              <div class="inner onlySides">

これは問題になる可能性があります。

— ビリージョー
ソース
ありがとうございます-調査させていただきます-これが私が経験している問題を引き起こす可能性があるとは信じられませんが、これを追跡するためにプラグインを使用しているようです-そうであれば; どっち？
— FooBar 2014
firebug以外はプラグインを使用しません。validator.w3.orgでページの有効性を確認することは常に良いことです。divを閉じていない場合、奇妙な動作が発生するため、これは問題になります:)
— billyJoe 14
4

ジャンプの背景を解決する最も簡単な方法は、2つのパラメータを定義することです。

body.modal-open {
  overflow: visible;
  padding-right: 0 !important;
}
— ニルス
ソース
3

私は自分のローカルホストでこの問題を再現しようとしましたが、不思議なことに、使用しているBootstrap JSファイルとの競合があります。

あなたのコードにコメントしてみてください：

<script src="/min/?f=bootstrap.min.js,modernizr.js,bootstrap-datetimepicker.js,nprogress.js,feedback.js,select2.min.js,jquery.unveil.js,equalheights.jquery.js,hogan-v2.0.0.min.edu-custom.js,jquery.visible.min.js,handlebars-v1.2.0.js,typeahead.bundle.min.js,jquery.gridster.js,cookie.jquery.js,jquery.autosize.min.js,application.js&ver=1392814384"></script>

代わりに、Bootstrap 2.3.2を使用します。

<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

これでうまくいきました。

Bootstrapバージョン3で試しましたが、うまくいきませんでした。まだ問題の部分を特定することはできませんが、Firebugのどこかでe.preventDefault() is not a functionエラーが発生しました-これが根本的な原因であると思いますが、まだ他のJSファイルと比較していません。

— AyB
ソース
3

.modal topを画面中央に設定してみました。 

.modal {
    position: absolute;
    top: 50%;
}

ちょうど私の2セントの考え。

— ホルガー・ティエボッシュ
ソース
十分近い。私の問題は別の場所にある可能性があるため、私は反対票を投じませんが、これにより画面の下半分が淡色表示になりましたが、モーダルは中央に向かって配置されていました。
— 製作者
3

ブートストラップ3.1.1では、このソリューションで解決しました：

body.modal-open {
    position: absolute !important;
}
— フィロ
ソース
2
あなたは私の日を保存しました@Filoありがとうございました
— vinothini
2

divのdiv直前<div id="footer">または直後に2つの追加の終了タグがあります<div id="mainFrame" class="group">。これを調べるために、ビジュアルスタジオ2012エクスプレスを使用しています。

これらの2つの余分なdivを削除して、それがどのように機能するかをお知らせください。余分なdivを削除し、すべてのカスタムスクリプトを削除しました。フッターでjqueryコアとブートストラップのみを保持しました。これが最終的な出力の概要です。 これが、正常に動作しているあなたのためのjsbinプレイグラウンドです。

headjsを使用してすべてのスクリプトとcssファイルを読み込むことをお勧めします。また、スクリプトを2回ロードすることはお勧めしません。

ここに画像の説明を入力してください

— ラビマリヤ
ソース
4
反対票を投じた回答には、理由のある適切なコメントが必要です。
— Ravimallya 2014
2

これを使用してモーダルを開き、何が起こるかを確認してください。

<a href="#generalModal" class="btn btn-primary btn-lg" data-toggle="modal">
  Launch demo modal 
</a>
— スクーターロード
ソース
2 
body.modal-open {
overflow: visible !important;
}

それを修正するために重要な属性が必要でした

— 霧雨
ソース
これは私にとってはうまくいきました、そしてpstenstrmの答えから（コメントで）@MandMの問題がありました：「私にとってはうまくいきません。私は.modal（ 'show'）で開いているバニラモーダルを持っていますページのトップに戻るBootstrap v3.2.0 "。唯一の奇妙な効果は、ウィンドウよりも高いモーダルをスクロールし続けると背景がスクロールすることですが、これは私にとっては小さな問題です。ありがとう。
— dgig 2017
1

Bootstrap 2.3.2を使用して同じ問題が発生しました

リンクをクリックする際の問題でした：

トリックは：falseを返す。

<a href="#" class="btn" onclick="openPositionPopup(${positionReport[0]}); return false;">
     <i class="icon-map-marker"></i>
</a>

そしてjs：

function openModal() {
    $('#myModal').modal('show');
}
— mpccolorado
ソース
1

私はこれに何時間も費やして、ここや他のすべてのものを試しました。angularjs-materialの使用については、uibModal.open構成オブジェクトの引数でアニメーションを無効にする必要があることがわかりました。

例えば：

  $uibModal.open(
    {
      animation: false,
      component: 'myDialogComponent',
      size: 'lg',
      resolve: {
        details: function() {
          return detailsCollection;
        }
      }
    }
  );

これが他の誰かを助けることを願っています。

— ネイサンビーチ
ソース
1

Angularプログラムでこの問題に直面している場合は、.scssファイルの最初の行に以下のコードを追加してください。

::ng-deep {   
     body.modal-open {
          overflow: visible !important;
          position: absolute !important;   
     } 
}
— シバシャンカールパンダ
ソース
0

私は同じ問題を抱えていて、私はそれを理解していると思います。モーダルHTMLをbodyタグの直接の子として配置するだけです！ただし、モーダルをトリガーするボタンのHTMLコードを必要な場所に配置できます。これにより、この問題を引き起こすCSSの継承と位置の問題を回避できると思います。

例：

<body>
    <!-- All your other HTML code -->
    <div>
        <!-- Button trigger modal -->
        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
            Launch demo modal
        </button>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
</body>
— ヌノアルダ
ソース
0

最後にこれを理解しました。モーダルをターゲットとするボタンをアンカータグでラップしないでください。

悪い

<a href"#">
    <button type="button" class="btn"
data-toggle="modal" data-target="#myModal">See Detail</button>
</a>

良い

<button type="button" class="btn"
    data-toggle="modal" data-target="#myModal">See Detail</button>
— ALFmachine
ソース
0

これは私のためにやった

body.modal-open {
    overflow: inherit;
    padding-right: 0 !important;
}
— ウォーキティ
ソース
モーダルを開いたときに、ナビゲーションバーとコンテナーのジャンプで同様の問題が発生していました。これは私が探していたものです。
— Awhitey98
それが役に立ててうれしい！
— warkitty
0

数時間かけて数十の回答を読んだ後、ブートストラップファイルから元のコードを再度コピーし、ステップごとにデバッグして、常に一番上にジャンプする原因を確認しました。Bootstrap 3の実際の最新バージョンでは、現在の位置にモーダルが表示されているためです。私はことを発見した-webkit-transform: translate3d(0,0,0);とheight: 100%、この動作を引き起こした私のCSSのボディ・タグで。多分これは誰かを助ける。

— AlexioVay
ソース
0

私にとっては、バージョンを3.1.1から3.3.7に変更したときに機能します

バージョン3.3.1を使用する必要がない場合は、置き換えてみてください。

変更後、残りの機能が正しく動作することを確認することをお勧めします。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
— ピオット
ソース
0

私は上記の例をすべて試しました-これが私のために働いた唯一のものです：

.modal-open {

            padding-right: 0 !important;

        }

モデルの右側からパディングを削除する-ジャンプを防ぎます。

— Stnfordly
ソース
0

高さ：100％は問題を解決しますが、正しい「div」を追加する必要があります

— アナーアリ
ソース
0

同じ問題が発生しましたが、どの回答も役に立ちませんでした。馬鹿げているように見える回避策を見つけましたが、それは少なくとも私の場合には機能します。

ページが1回だけ上にスクロールし、その後、次に開いたモーダルが期待どおりに機能することがわかりました。DOM内の要素を非表示にすると、同じ奇妙なスクロールが開始されることがわかりました。したがって、ページの読み込み後にダミーdivを作成して非表示にして削除するだけで問題が解決しました。

var $dummy= $("<div>");
$("body").append($dummy);
$dummy.hide().remove();
— ボルジロアンドレイ
ソース
0

私は同じ問題に直面していました。問題は、.modal-openクラスをhtmlおよびbody要素に追加していたことです。このクラスをbodyに追加するだけで、すべてが期待どおりに機能します。

— 一般666
ソース
-1

これを試してみてください

/* fix body.modal-open overflow:hidden */
body.modal-open {
    height: auto;
}
— ミニミット
ソース
-3

pstenstrmの答えがうまくいかない場合は、次の置換ボタンHTMLと組み合わせてみてください。

<a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#generalModal" id="launchbutton" href="#launchbutton"> Launch demo modal </a>

これにより、ボタンが画面に表示されます。

— ベン
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.