位置要素ですが、まだ画面上にあることを確認してください

Question

ユーザーがボタンをクリックすると開くjQuery UIダイアログがあり、ボタンの近くにダイアログが表示されます。これは、例えば、それほど難しいことではありません。

var pos = $('#mybutton').offset(); 
$('#mydlg').dialog({ 
    // ... 
    autoOpen: false, 
    position: [pos.left, pos.top] 
}); 

ボタンは、画面の右端にある、または画面の最下部にときに問題があります。新しく開いたダイアログは、ウィンドウが画面外になるためにスクロールします。

ダイアログを左/上に開くように位置を計算すると、これらの場合のみ画面上に表示されます。

Answer 1

var pos = $('#mybutton').offset(); 

    //if dialog height/width are known 

    var dialogTop = pos.Top; 
    var dialogLeft = pos.left; 

    if((dialogHeight + pos.top) > $(window).height()) 
    { 
     dialogTop -= dialogHeight; 
    } 

    if((dialogWidth + pos.left) > $(window).width()) 
    { 
     dialogLeft -= dialogWidth; 
    } 

    $('#mydlg').dialog({ 
     autoOpen: false, 
     position: [dialogLeft, dialogTop] 
    }); 

    //if the dialog height/width are unknown then move this to a function in the dialog onLoad