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

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