代码之家  ›  专栏  ›  技术社区  ›  chroder

定位元素,但确保它仍在屏幕上

  •  1
  • chroder  · 技术社区  · 16 年前

    我有一个jQueryUI对话框,当用户单击按钮时打开,我希望该对话框出现在按钮附近。这并不难,例如:

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

    问题是当按钮位于屏幕最右侧或屏幕最底部时。新打开的对话框将导致窗口滚动,因为它会离开屏幕。

    1 回复  |  直到 16 年前
        1
  •  2
  •   kukabuka    13 年前
        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