javascript - jQuery 适配屏幕插件

Question

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

我是这样使用它的:

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

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

$("body").on("click", ".popup-trigger", function () {
    var $button = $(this),
        $popup = $button.closest(".popup-wrapper").children(".popup");

    // TODO set popup position to fit screen
    $popup.show();
});

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 对象或选择器，它会返回一个具有四个值的对象:

1. left:元素左侧到窗口左侧的距离。如果为负，则元素的边框从窗口的左侧开始。
2. top:元素顶边到窗口顶边的距离。如果为负，则元素的顶部位于窗口顶部之上。
3. right:窗口右侧到元素右侧的距离。如果为负，则元素的右侧位于窗口的右侧。
4. bottom:窗口底边到元素底边的距离。如果为负，则元素的底部低于窗口的底部。

希望对你有用!