web-dev-qa-db-ja.com

jqueryダイアログが開いたときにウィンドウが上にスクロールする

Jquery1.4とjquery-ui-1.8rc3.custom.jsを使用してモーダルjqueryダイアログを開こうとしています

ダイアログはすべてのブラウザで問題なく開きますが、IE 7および6では、ダイアログが開いた後、ウィンドウが一番下までスクロールします...ウィンドウを上にスクロールしてみましたモーダル位置に戻りますが、非常に一貫性がありません。モーダルを開いた後、次のコード行を使用していました

window.scrollTo($('#selector').dialog('option', 'position')[0],$('#selector').dialog('option', 'position')[1]);

私が気付いている奇妙なことの1つは、モーダルを開いた後、ページが巨大になることです...いくつかの余分なものが下部に追加されるかのように....そして最終的には下部にスクロールします。なぜこれが起こっているのか考えてみてください

hTMLで

<div id="selector">
</div>

document.readyで

$('#selector').dialog({
  bgiframe: true,
  autoOpen: false,
  width: 100,
  height: 100,
  modal: true,
  position: 'top'
});

jsで

$('#selector').dialog('open');
jqueryscrollpositionjquery-ui-dialog
20
zoom_pat277

セレクターに_#_がないようです。

_window.scrollTo($('#selector').dialog('option', 'position')[0], $('#selector').dialog('option', 'position')[1]);
_

これが、ウィンドウが左上隅にスクロールしている理由である可能性があります。

編集：私はドキュメントを見ていましたが、.dialog('option','position')のデフォルト値はcenterです。

位置タイプ：文字列、配列デフォルト： 'center'

ダイアログを表示する場所を指定します。可能な値：1）ビューポート内の位置を表す単一の文字列： 'center'、 'left'、 'right'、 'top'、 'bottom'。 2）ビューポートの左上隅からのピクセルオフセットでx、y座標ペアを含む配列（例：[350,100]）3）x、y位置文字列値を含む配列（例：['right'、 'top']右上隅）。

したがって、positionオプションを使用してテキストまたは数値を返すことができ、window.scrollTo()には数値が必要です。代わりにこれを試してください：

_var d = $(".ui-dialog").position();
window.scrollTo( d.left , d.top);
_
3
Mottie

以下のようなアンカータグを使用してダイアログをトリガーする場合

<a href="#" onclick="$(#id).dialog('open');">open dialog</a>

return false;をonclick属性に追加する必要があります。

<a href="#" onclick="$(#id).dialog('open'); return false;">open dialog</a>

これにより、ページがアンカー#に再読み込みされ、ページが先頭にジャンプするのを防ぎます。

38
bassim

私もこの問題に苦しんでいました。テーマを使用しなかったため、この重要なCSSプロパティはありませんでした。

position:absolute;

これをCSSファイルに追加しましたが、すべて正常に機能します。

.ui-widget { position: absolute; }
6
telecasterrok

スタイルシートで設定されているダイアログにクラスを割り当てていたため、この問題が発生しました。

position: relative;

これはオーバーライドしていました：

position: absolute;

ダイアログに必要です。

基本的に、.ui-dialogクラスに次のものがあることを確認してください。

position: absolute;

また、ウィンドウがページの一番下までスクロールしてはならず、余分な垂直方向のスペースが本文に追加されることはありません。

3
Stephen Blair

別の解決策は、ダイアログが開いているときにevent.preventDefaultを呼び出すことです。

$('#demo4').click(function() { 
    $( "#tallContent" ).dialog( "open" );
    event.preventDefault(); 
});
1
Agustincl

私も同様の問題を抱えていましたが、これが私が解決した方法です。 @bassimソリューションに似ていますが、味が少し異なります。

同じアンカータグを使用して、「$（＃anchor-element）.click（function（）{..}」を使用しました。以下はコードスニペットです-

Jspで-

<a id="open-add-comments-${site}" class="open-add-comments" href="#"  site-id="${site}" project-id="${project}"  >Add comments</a><br/>

Javascriptで-

 $( ".open-add-comments" ).click(function(){

    var projectId=$(this).attr("project-id");

    $( "#add-comment-form" ).dialog({
        //width: "auto",
        width: 800,
        height: "auto",
        position: "absolute",
        maxWidth: 800,
        minWidth: 300,
        maxHeight: 400,
        modal: true,
        title: "Adding comment for \"${project.name}\" and site \""+siteName+"\" ",
        open: function(event, ui) { 

        $("#add-comment fieldset textarea").html("").focus();
            ............
            .....
        },
        buttons: {
            "Save": function() {

            .... some business logic

            },
            Cancel: function() {
                $( this ).dialog( "close" );

            }
        }   

    });

    return false; // -- THIS IS IMPORTANT AND RESOLVED THE ISSUE

});

これでうまくいき、問題が解決しました。このページでお休みいただき、ありがとうございます。賞賛チーム。

1
Sirish

ダイアログがページの本来あるべき場所で開いていたのに、ユーザーがページの下部にリダイレクトされたという同様の状況がありました。基本的に、jQuery UIJavaScriptライブラリに一致する適切なcssを含めるのを忘れていました。これを行うことにより、すべてが大丈夫でした。自分のcssに設定されていないjQuerycssの要素にスタイルが設定されているようなものだと思います。

問題をデバッグしてjQueryUI css全体を含める必要がないように、2つの同一のページを作成しました。1つはjQuery UI cssを使用し、もう1つは使用せず、FirefoxのFirebugを介してcssの違いを確認し、これらのスタイルを追加しました。私のCSSに。

それが役に立てば幸い。マグ

1
Mag

修正方法：

[〜＃〜] html [〜＃〜]

<a href="javascript:openDialogFunction(parameters)">...</a>

Javascript

function openDialogFunction(parameters) {

    var topOff = $(window).scrollTop();

    //code to open the dialog

    $(window).scrollTop(topOff);
}
1
Mauricio Ramalho