11

Twitter Bootstrap Modalがポップアップするようにトリガーするリンクをクリックすると、ブラウザーがページを上にスクロールします。この動作はChromeでのみ発生します。

デモページは次のとおりです。

http://www.turizmburosu.com/test2.aspx

ページには600行のリンクがあり、ページ本体がウィンドウの高さを超えています。これらのリンクのいずれかをクリックすると、モーダルダイアログが表示されます。Chromeの場合、最初のビューの下にあるリンクのいずれかをクリックすると、背景ページが上にスクロールします（必ずしも完全に上に表示されるとは限りません）。

次の関数を使用して、モーダルの表示をトリガーしています。

function test(id, imp) {
    $("#modalLabel").html("Header");
    $("#modalBody").html("Body");
    $("#myModal").modal("show");
}

リンクの形式は次のとおりです。

<a href="" onclick="test();return false;">Test Link ###</a>

Chrome22.0.1229.94mでこの動作が見られます。

なぜこれが起こっているのか、そしてそれを防ぐ方法についての提案/アイデアはありますか？

追加の例

これは、ModalプラグインのTwitterBootstrapドキュメントページで再現できます。

ページが表示されたら、既存のdata-apiをオーバーライドして、代わりにJavaScriptapiを使用します。

$('#modals a[data-toggle="modal"]').on('click',
  function(e) {
    $('#myModal').modal('toggle');
    return false
  });

これで、 [デモモーダルの起動]ボタンをクリックすると、モーダルが表示されたときにページが上にスクロールします。

繰り返しますが、これはChromeを使用しています。

4

6 に答える 6

18

修正済み（2012年10月29日）

この問題は、Bootstrapv2.2.0以降で修正されています。詳細については、 commite24b46...を参照してください。

（元の回答）

これは、Twitter Bootstrap Modalの実装のバグが原因です（2.1.1以降）。問題の根本は、遷移が完了する前にフォーカスがモーダルに設定されていることです。これは、次の条件でのみ発生します

  1. ブラウザはCSSトランジションをサポートしています（そして、bootstrap-transition.jsを使用しています）。
  2. モーダルにはクラスがfadeあります; と
  3. 現在のビューの外側の要素にフォーカスが設定されている場合、ブラウザはスクロールしてビューに移動します（Chrome、Safariなど）。

これは、Data API（マークアップベース）とProgrammatic API（JSベース）の両方に影響することに注意してください。ただし、プログラムによるアプローチを採用する場合に目立つ理由は、Data APIとは異なり、トリガー要素にフォーカスを自動的に復元しないため、モーダルが非表示のときにビューを下にスクロールしないためです。

詳細については、Twitter BootstrapリポジトリのIssue＃5336：Modal ScrollsBackgroundContentを参照してください。

修正が2.1.2-wipブランチにマージされました。これは、いつでもリリースできるようになるはずです。

パッチbootstrap-modal.jsを使用したデモは次のとおりです。

JSFiddle

于 2012-10-19T12:54:18.687 に答える
5

同じ問題。これは「＃」が原因で、アンカーがスクロールしようとしています。アンカータグを削除してこれを配置することで修正しました：

<span onclick="$('#umisteni_modal').modal('show');" style="cursor:pointer;">Změnit místo dodání</span>
于 2015-05-20T20:55:05.817 に答える
1

私のサイトでも同様の問題が発生しました。これは、別のjqueryプラグイン（sidr）が原因でした。サイドバーがあり、モーダルウィンドウを開くと、トップに戻されます。

jquery.sidr.jsで、102行目から106行目を次のように変更しました。

// Prepare page if container is body
if($body.is('body')){
scrollTop = $html.scrollTop();
$html.css('overflow-x', 'hidden').scrollTop(scrollTop);
}

に：

// Prepare page if container is body
if($body.is('body') && !$('#modal').hasClass('in')){
scrollTop = $html.scrollTop();
$html.css('overflow-x', 'hidden').scrollTop(scrollTop);
}

このプラグインをtwitterブートストラップのモーダルと一緒に使用している場合は、これが役立つ可能性があります。

于 2014-03-06T08:12:20.217 に答える
0

ブラウザにスクロールバーを永続的に表示すると考えられていたCSSのこれらの行のために、同じ問題が発生しました。2行を削除すると、問題が解決しました。

html,
body {
    min-height: 100%;
    height: 101%;
}
于 2015-08-31T19:29:25.633 に答える
0

フォーカスをクローズに戻す

var triggerOffset=0;
$('.modal').on('show.bs.modal', function() {
    triggerOffset=$(window).scrollTop();
});
$('.modal').on('hidden.bs.modal', function() {
     var animationTime=1;
    $('html, body').animate({
        scrollTop: (triggerOffset)
    }, animationTime);
});
于 2016-05-23T04:19:41.593 に答える
0

私は長い間この問題を抱えていましたが、私の解決策はアンカータグからhrefを削除することでした

すなわち

<a onclick="test();return false;">Test Link ###</a>

今はジャンプしません

これが将来誰かに役立つことを願っています

于 2016-11-18T10:31:45.513 に答える