4

Twitter Bootstrap パッケージ内のモーダル コンポーネントを使用しています。このモーダルはボタンのクリックから開き、そのコンテンツは Ajax 呼び出しによって動的に読み込まれます。上記のすべては、PC (FF、Chrome) および iPad (Safari) でも問題なく動作します。ただし、iPad では、ボタンがクリックされる前に画面が少し下にスクロールされると、モーダルの背景は画面の一部のみをカバーします (画面がどれだけ下にスクロールされるかによって異なります)。ページがスクロールされると、背景は正しい位置にジャンプします (モーダルの背後にある画面全体をカバーします)。

背景が画面を部分的にしか覆っていないため、非常に見苦しく見えるため、これについて何か助けていただければ幸いです。

影響しないもの:

  • 「フェード」クラス
  • DOM 内でのモーダル コードの配置。
  • Javascript を使用して手動でページをスクロールする

以下に、一部を取り除いたコードを含めます (簡潔にするために内部コントロールなどを削除しました)。

モーダル:

<div id="tehtavaModal" class="modal hide fade">
    <div class="modal-header">
        <a class="close" data-dismiss="modal" href="#">&times;</a>
        <h3 id="tehtavaModalOtsikko"></h3>
    </div>
    <div class="modal-body">
        <div id="tehtavaModalSisalto"></div>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Sulje</a>
        <a href="#" class="btn btn-primary" data-dismiss="modal">Tallenna Vastaukset</a>
    </div>
</div>

モーダルを開く関数:

function haeTehtava(tehtavaID) {
    $('#tehtavaModalOtsikko').html('Tehtävä');
    $('#tehtavaModalSisalto').html('<p>Tehtävää haetaan...</p>');
    $('#tehtavaModalKysymykset').html('');
    $('#myCarousel').hide();

    $.getJSON("Sivu/HaeTapahtuma", { 'tyyppi': 4, 'ID': tehtavaID }, naytaTehtava)
        .error(function () { $('#tehtavaModalSisalto').html('<div class="alert alert-error">Tehtävän haussa tapahtui virhe.</div>'); });
    $('#tehtavaModal').modal();
}

コールバック関数 (naytaTehtava) は、モーダルの内部セクションの一部を単純に入力します。

関数を呼び出すリンク:

<a href="#" onClick="haeTehtava(1);">Open Modal</a>

Twitter Bootstrap ページにある例は機能するので、何が違うのでしょうか?

編集: data- 属性を使用してモーダルを開くと、正常に動作します。この問題は、スクリプトでモーダルを開くときにのみ表示されます。

4

1 に答える 1

4

問題を深く調べすぎていたことがわかりました。モーダルを開くリンクには、画面をモーダルに設定するための href="#myModal" が必要です。ページの上部までスクロールしていたため、明らかに Twitter Bootstrap モーダルを破棄した href="#" しかありませんでした (モーダルはスクロールされた場所にありました。

進入禁止

<a href="#" onClick="$('#myModal').modal();">Open Modal</a>

正しい方法

<a href="#myModal" onClick="$('#myModal').modal();">Open Modal</a>

あるいは

<a href="" onClick="$('#myModal').modal(); return false;">Open Modal</a>

@baptme に感謝します。なぜなら jsFiddle に行くと、ページがスクロールしていた理由がわかったからです。

于 2012-06-20T06:40:55.760 に答える