JQuery вписывается в плагин экрана

0

Есть ли какие-либо 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();
});
  • 0
    Под «значениями переполнения» вы имеете в виду разницу между шириной / высотой? Или что-то более сложное, например, расстояние от каждой стороны окна до каждой стороны элемента DOM?
  • 0
    distance from each side of the window to each side of the DOM element
Теги:

1 ответ

0
Лучший ответ

Эта функция может вам подойдет:

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: расстояние от нижней стороны окна до нижней стороны элемента. Если отрицательный, нижняя сторона элемента находится ниже нижней части окна.

Надеюсь, он вам поможет!

Поделиться
  • 0
    Спасибо за ответ. Есть небольшая проблема, $el.offset() возвращает top: 0, left: 0 . Я думаю, потому что элемент имеет абсолютную позицию и находится внутри оболочки относительной позиции
  • 0
    offset() должен возвращать смещение относительно документа. Можете ли вы опубликовать свою разметку и CSS?
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню