Question

是否有任何jquery插件，对于给定的DOM元素，它会告诉我它是否适合屏幕，如果可能的话，返回溢出值（所以我可以调整top，{{ 1}}在显示弹出窗口之前正确定位。

我正在使用它：

left

我有一个显示弹出窗口的javascript函数：

<div class="popup-wrapper">
    <button type="button" class="popup-trigger">Button</button>
    <div class="popup" style="width: 300px; height: 300px;">
        Popup content
    </div>
</div>

Answer 1

此功能可能适合您：

function getBox(element) {
    var $el = $(element);
    var wWidth = $(window).width();
    var wHeight = $(window).height();
    var offset = $el.offset();
    var eWidth = $el.outerWidth();
    var eHeight = $el.outerHeight();
    return  {
         left: offset.left,
         top: offset.top,
         right: wWidth - (offset.left + eWidth),
         bottom: wHeight - (offset.top + eHeight)
    }
}

你传递一个DOM元素，jQuery对象或选择器，它将返回一个有四个值的对象：

left：从元素左侧到窗口左侧的距离。如果为负数，则元素的边框将从窗口的左侧开始。
top：从元素顶部到窗口顶部的距离。如果为负数，则元素的顶部位于窗口顶部上方。
right：从窗口右侧到元素的ritht侧的距离。如果为负数，则元素的右侧位于窗口的右侧。
bottom：从窗口底部到元素底部的距离。如果是负数，则元素的底部位于窗口的底部下方。

希望它能为您服务！

jQuery适合屏幕插件

1 个答案: