Positionselement, aber stellen Sie sicher, dass es immer noch auf dem Bildschirm angezeigt wird

Question

Ich habe ein jQuery UI-Dialogfeld, das geöffnet wird, wenn der Benutzer auf eine Schaltfläche klickt, und ich möchte, dass das Dialogfeld in der Nähe der Schaltfläche angezeigt wird. Das ist nicht so schwer, zum Beispiel:

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

Das Problem ist, wenn die Schaltfläche auf der rechten Seite des Bildschirms ist, oder am unteren Rand des Bildschirms. Der neu geöffnete Dialog lässt das Fenster scrollen, weil es vom Bildschirm verschwindet.

Wie berechne ich die Position, so dass der Dialog links/oben geöffnet wird, damit er nur in diesen Fällen auf dem Bildschirm angezeigt wird?

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