«
»
CSSPopUpsWordPressПлагины

jQuery – центрирование эелемента на примере окна Popups

Во время разработки очередного сайта возникла потребность отобразить попап окно в случае ошибки на котором будет изображён восклицательный знак, и соответствующий текст. Но с расположением попап окна по центру при реализации решения возникли определенные трудности, попап окно располагалось не по центру а слева.

Погуглив в интернете я нашёл интересную функцию которая помогла мне не один раз и не только с этим окном плагина Popups, но и при создании других интересных решений.

Ниже приведен код функции которая называется jQuery.fn.center, Чуть ниже при помощи данной функции я применил Century центрирование благодаря к окну Popups — $(«#spu-7466»).center();

/*Сценарий для перехода по страницам выборе чекбоксов*/ jQuery(document).ready(function($){ /*Центрирование элемента - ФУНКЦИЯ*/ jQuery.fn.center = function() { this.css("position","absolute"); this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px"); this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()) + "px"); return this; } /*Пример применения - Сценарий в случае если не выбран не один чекбокс отобразить Popups окно*/ if ($("input#japan,input#rus,input#fr,input#english ").prop("checked") !== true) { /*Ставим попап Popups плагина по центру при помощи функции .center()*/ $("#spu-7466").center(); /*Отображаем Popups окно (долго долго его вымучал)*/ jQuery("#spu-7466,#spu-bg-7466").show(); return false }; });

Спасибо за внимание, надеюсь данная функция вам пригодится не один раз при создании тех или иных вам решений в вашем нелегком веб пути.

Источник записи: https://mediadoma.com

Связанные записи
Windows инструкцииWordPress

Как разделить большие файлы XML в WordPress

PageSpeed InsightsWordPressПлагины

Как отключить плагины WordPress на определенных страницах и постах с плагином и без (через функцию)

WordPressПлагины

Создать сайт членства с WordPress

ElementorWordPressПлагины

Как закрыть по умолчанию аккордеон в Elementor