20

jquery 1.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');
4

8 に答える 8

38

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

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

属性に areturn false;を追加します。onclick

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

これにより、アンカーへのページのリロードが防止#され、上部にジャンプします。

于 2010-08-06T14:00:42.453 に答える
6

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

position:absolute;

これを CSS ファイルに追加したところ、すべて正常に動作するようになりました。

.ui-widget { position: absolute; }
于 2010-08-03T19:05:50.610 に答える
3

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

position: relative;

以下をオーバーライドしていました：

position: absolute;

ダイアログで必要です。

基本的に、.ui-dialog クラスに以下があることを確認します。

position: absolute;

ウィンドウはページの一番下までスクロールされるべきではなく、余分な垂直スペースは本文に追加されません。

于 2012-02-24T15:22:50.367 に答える
3

#セレクターに次のものがありません。

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

それが、ウィンドウが左上隅にスクロールしている理由かもしれません。

編集:ドキュメントを見ただけで、.dialog('option','position')デフォルト値はcenterです。

position タイプ: 文字列、配列 デフォルト: '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);
于 2010-05-06T00:57:23.977 に答える
1

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

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

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

于 2010-05-26T14:11:54.090 に答える
1

修正方法：

HTML

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

Javascript

function openDialogFunction(parameters) {

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

    //code to open the dialog

    $(window).scrollTop(topOff);
}
于 2013-03-08T16:05:30.767 に答える
1

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

$('#demo4').click(function() { 
    $( "#tallContent" ).dialog( "open" );
    event.preventDefault(); 
});
于 2013-06-15T07:03:56.533 に答える
1

私は同様の問題を抱えていましたが、これが私が解決した方法です。@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

});

これはトリックを行い、問題を解決しました。良い指針を示し、問題の解決を助けてくれたこのページで休んでくれてありがとう。称賛チーム。

于 2013-03-20T21:21:22.930 に答える