Элемент позиции, но убедитесь, что он все еще на экране

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