0

ここに画像の説明を入力ここに画像の説明を入力 ここに画像の説明を入力 ご覧のとおり、3 つの画像 Screenshot1.png 、 Screenshot2.png 、 Screenshot3.png が表示されます。ここで screenshot1 で、[Create Iteration] をクリックすると、ダイアログ ボックスが作成されますが、その場所は正しい位置にありません。つまり、screenshot2.png です。Screenshot3.png でわかるように、その場所をカスタマイズしたいと思います。position[200,380] を指定して位置を修正しようとしたため、問題なく動作しますが、ラップトップのような小さな画面の場合、位置が乱れます。ダイアログボックスを作成すると、スクリーンショット3.png 1でわかるように作成されるように、場所と位置をカスタマイズすることは可能ですか?

ダイアログボックスが作成されたら、常に「反復ページ」内で開く必要があります。反復1は私のダイアログボックスです。基本的に、私のコードを見れば、私が何を望んでいるのか推測できます。

コードはこちら [jsfiddle.net/coolanuj/7683X/46/]

4

1 に答える 1

1

あなたがする必要があるのは、配置しoffset()たいページ内の要素に基づいて、位置配列の配列を動的に作成することです。

以下は、次の単純な html に基づいて動的に配置されたダイアログを作成するデモ コードです。

HTML

<div class="col"><button>Open Dialog</button></div>
<div class="col"><button>Open Dialog</button></div>
<div class="col"><button>Open Dialog</button></div>

JS:

/* how much to offset from the main element*/
var dialogOffset = {
        top: 50,
       left: 10
}

$('button').click(function() {
    var $parent = $(this).closest('div.col');
    var parentPos = $parent.offset()
/* create position array for new dialog*/
    var dialogPosition = [parentPos.left + dialogOffset.left, parentPos.top + dialogOffset.top];

    var parentIndex = $('.col').index($parent)

    $('<div>').dialog({      
         position:  dialogPosition,
        width: 150,

        title: 'Column '+(parentIndex+1) ,
        close: function() {
            $(this).remove()
        }
    })
})

デモ：

フルページ: http://jsfiddle.net/CPtp4/show/

コード ビュー: http://jsfiddle.net/CPtp4/

ダイアログを使用するためのさまざまな設定があるため、いつ位置を設定するかについては、アプリケーションによって少し異なります。この方法で、ダイアログを開くたびに位置を設定できます。

/* iniitalize dialog on page load*/
$('#dialog').dialog({
    autoOpen:false

});

$('#myButton').click(function(){
     var pos=$('#myDiv').offset();
     var dialogPos=[pos.left, pos.top];
     $('#dialog').dialog('option','position',dialogPos).dialog('open')

})
于 2012-11-11T11:44:02.050 に答える