Konum ögesi, ancak hala ekranda görüntülendiğinden emin olun

Question

Kullanıcı bir düğmeyi tıklattığında açılan jQuery UI iletişim kutusunu kullanıyorum ve iletişim kutusunun düğmenin yanında görünmesini istiyorum. Bu, örneğin, çok zor değildir: düğme ekranın en sağ tarafta veya ekranın en altında iken

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

sorundur. Yeni açılan diyalog penceresi ekranın dışına çıktığından kaymasına neden olur.

İletişim kutusunun sol/yukarı açılmasını sağlayacak şekilde konumu nasıl hesaplayabilirim, böylece yalnızca bu durumlarda ekranda kalır?

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