Search and Navigation Popup и полезные снипеты и переводы плагина
Описание плагина
Скачать плагин:
https://wordpress.org/plugins/search-and-navigation-popup/
При помощи данного плагина Вы можете без проблем отобразить окно поиска или всплывающее окно навигации по ссылкам, нажав на кнопки в меню. Итог работы плагина выглядит очень приятно. Особенно мне приятен плагин реализацией попап окна поиска, которое отрабатывает просто прекрасно. Посмотреть DEMO для более подробной информации.
Плагин содержит 2 шорткода
Этот плагин также регистрирует местоположение меню в вашей теме, т.е. «Popup Menu». Если вы хотите отобразить меню во всплывающем окне, выберите это местоположение меню.
Как бы плагин не отрабатывал классно, все равно каждый проект требует своей уникальности и соответственно свой уникальный внешний вид. Сниппет стилей ниже поможет Вам привести всплывающие окна плагина к требуемому виду.
/* Указываем шрифт */
.custombox-content.custombox-fullscreen form#searchform,
.custombox-content.custombox-fullscreen input#s {
font-family: Alegreya Sans !important;
}
/* Оформление кнопки */
.custombox-content.custombox-fullscreen button.search-btn {
font-family: Alegreya Sans;
font-size: 25px;
background-color: rgb(35,64,130) !Important;
padding: 10px 25px 10px 25px !Important;
border:2px solid rgb(35,64,130) !Important;
}
.custombox-content.custombox-fullscreen button.search-btn:hover {
background-color: rgb(255, 255, 255) !Important;
color:rgb(35,64,130) !Important;
padding: 10px 25px 10px 25px !Important;
border:2px solid rgb(35,64,130) !Important;
}
/* Запрещяем скрытие скрола во время открытия попапа */
.custombox-lock {
overflow: inherit !important;
}
/* Затемняем фон оверлея */
.sanpop-modal {
background: rgba(11, 22, 49, 0.88) !important;
}Скрипт JS для скрытия окна поиска при клике на его оверлей (фон)
В общем я тут немного заморочился и написал свою реализацию для скрытия всплывающего окна по клику на его фон. Ну мне так кажется что данная реализация более удобнее чем возможность закрытия окна только по кнопке крестика.
// ========================================================================================
// search-and-navigation-popup - При клике на овердей скрываем попап окно поиска
// START
// ========================================================================================
jQuery(document).ready(function($) {
$('body').bind('click', '.custombox-content.custombox-fullscreen:not(.sanpop-search-box)',function(event) {
// Для того чтобы исключить скрытие формы при клике по Input'у
// Вычисляем ID родителя при клике на оверлей (Ну и он отличается от ID родителя при клике в Input или кнопку отправки)
// console.log(event.target.id);
var ParrentOverley = event.target.id;
if (ParrentOverley == 'sanpop-modal-1'){
// console.log('?? Да был клик по оверлею, можно скрывать окно поиска');
// Юзаем функцию закрытия попап окна от самого плагина
Custombox.modal.close();
}
});
});
// ========================================================================================
// END
// search-and-navigation-popup - При клике на оверлей скрываем попап окно поиска
// ========================================================================================Переводы плагина на Украинский, Русский и Английский языки
Да, и не смотря на то что плагин был обновлен и его автор все таки добавил домен для реализации переводов… Сами переводы в последней (1.0.1) версии мной найдены не были. Я психанул и перевел все сам. Ниже ссылка на архив со всеми переводами.