web-dev-qa-db-ja.com

Bootstrapモーダル：トグルで背景がトップにジャンプします

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

解決策などを見つけるためにできる限りのことをしましたが、本当に迷っています。

編集：

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

javascriptjquerycsstwitter-bootstraptwitter-bootstrap-3
99
FooBar

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

body.modal-open {
    overflow: visible;
}

これでスクロールが所定の位置にとどまるはずです。

160
pstenstrm

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

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
26
Gokhan
$('the thing you click on').click(function ($e) {
            $e.preventDefault();
});

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

10
Georgi Mirchev

<a href"#" ..> ... </a>としてアンカータグを使用しており、href="#"が問題を引き起こしている場合は、それを削除します。もっと読むことができます こちら

8
Nimesh Jain

おそらくコード内のどこかにネストされたモーダルでの作業：

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

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

4
Dennis Heiden

特定のエラーは表示されませんが、 html構文を確認してください をお勧めします。

あなたのソースでの小さなテストは私に次のようなエラーを与えます

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

              <div class="inner onlySides">

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

4
billyJoe

Localhostでこの問題を再現しようとしましたが、奇妙なことに、使用している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ファイルとはまだ比較していません。

3
AyB

画面の中央に.modal topを設定しようとしました。

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

ちょうど私の2centsの考え。

3
Holger Thiebosch

<div id="footer"> divの直前または<div id="mainFrame" class="group"> divの直前に2つの追加のdivタグがあります。 Visual Studio 2012 Expressを使用してこれを検査しています。

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

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

enter image description here

2
Ravimallya
body.modal-open {
overflow: visible !important;
}

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

2
Dizzle

bootstrap 3.1.1では、このソリューションで解決しました：

body.modal-open {
    position: absolute !important;
}
2
Filo

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

<a href="#generalModal" class="btn btn-primary btn-lg" data-toggle="modal">
  Launch demo modal 
</a>
2
scooterlord

body.modal-open { position: inherit; }

これは私にとって魅力的でした。

0
Nimish goel

私は同じ問題を抱えていたと私はそれを理解すると思います。 モーダル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
nunoarruda

これは私のためにやった

body.modal-open {
    overflow: inherit;
    padding-right: 0 !important;
}
0
warkitty

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

リンクをクリックすると問題が発生しました。

秘trickは、falseを返すことです。

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

そして、js：

function openModal() {
    $('#myModal').modal('show');
}
0
mpccolorado

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

悪い

<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>
0
ALFmachine

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

.modal-open {

            padding-right: 0 !important;

        }

モデルのright側からパディングを削除すると、ジャンプが防止されます。

0
Stnfordly

数時間にわたって数十の回答を読んだ後、元のコードをbootstrapファイルから再度コピーし、ステップごとにデバッグして、原因を確認し、常に先頭にジャンプしました。 Bootstrap 3の実際の最新バージョンでは、現在の位置にモーダルが表示されているためです。 css body-tagの-webkit-transform: translate3d(0,0,0);とheight: 100%がこの動作の原因であることを知りました。たぶんこれはいくつかの助けになります。

0
AlexioVay

変更済み.1.1から.3.7までのバージョン

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

変更後、checkを使用すると、関数の残りの部分が正常に機能するようになります。

<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
Pyot

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

0
general666

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

0
Anar Ali

私は同じ問題を抱えていて、どの回答も私を助けませんでした。バカに見える回避策を見つけましたが、少なくとも私の場合は動作します。

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

var $dummy= $("<div>");
$("body").append($dummy);
$dummy.hide().remove();
0
Borzilo Andrey

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

body.modal-open {
  overflow: visible;
  padding-right: 0 !important;
}
0
Nils

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

例えば：

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

これが他の誰かに役立つことを願っています。

0
Nathan Beach