1

リンクのクリック時にダイアログ ボックスのポップアップを使用しました。親ページのリンクの背景をクリックすると、白い色に変わり、中央にダイアログ ボックスが表示されます。

しかし、ブラウザのサイズ/画面を最小化しようとすると、ポップアップが右に移動します。ブラウザ画面が最小化されているかどうかに関係なく、中央にダイアログボックスのポップアップが必要です。

ダイアログボックスには次のjqueryとcssとコードを使用します

  1. jquery-ui-1.8.7.custom.css
  2. jquery-ui.min.js

コード :

$('.addlink').click(function() {
    $("#add_action").dialog({
        modal: true, 
        draggable: false, 
        resizable: true, 
        minWidth: 200, 
        width:560,
        minheight:98, 
        zIndex: 50000},
        {position:[400,120]
    });
});
4

2 に答える 2

1

これを試して：

$(window).resize(function() {
    $("#add_action").dialog("option", "position", "center");
});
于 2012-05-16T09:28:15.403 に答える
1

パート1：

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

position オプションを指定してダイアログを初期化します。

$( ".selector" ).dialog({ position: "top" });

init 後の位置オプションを取得または設定します。

//getter
var position = $( ".selector" ).dialog( "option", "position" );
//setter
$( ".selector" ).dialog( "option", "position", "top" );

パート2：

positionオプションを設定するとこれが強制されるため、ここで使用するすべてのダイアログをカバーする同じセレクターを使用して#dialogください (すべての jQuery と同様に、ダイアログが見つからない場合は何も実行されません)。

$(window).resize(function() {
    $("#dialog").dialog("option", "position", "center");
});

上記のコードのみを追加した同じ jQuery UI デモ ページをresize次に示します。ウィンドウのイベントに を使用してハンドラーを追加しているだけ.resize()なので、適切なタイミングで再中心化がトリガーされます。</p>

于 2012-05-16T09:31:01.290 に答える