/ Scripts & jquery / Кнопка всплывающего поиска (+ курсор в поиске)

Кнопка всплывающего поиска (+ курсор в поиске)

HIT

06.10.2015

1443

Реализуем скрытый поиск, т.е. форма поиска изначально не показана и вызывается нажатие кнопки.

Форму поиска и подложку вставляем в шапку (например, после открытия div main)

<div id="backfon"></div>
<div id="sea">

<form method="get" id="searchform" action="https://opttour.ru/">
<button type="submit" id="pic-sea" value=""><i class="fa fa-search"></i></button>
<input type=text name="s" id='s' placeholder="Поиск" />
</form>

</div>

Делаем кнопку или пункт меню с id=search-item

<li class="menu-item search-item"><a><i class="fa fa-search"></i> Поиск</a></li>

Script, различные эффекты с помощью анимации

$(document).ready(function() {

//Появление поиска + !курсор в строке поиска

$('.search-item').click(function() {

$('#sea').show();
$('#sea').removeClass('fadeOutDown');
$('#sea').addClass('animated fadeInDown');
$('#backfon').show();
$('#backfon').removeClass('fadeOut');
$('#backfon').addClass('animated fadeIn');

});


//  курсор в строку поиска
$('.search-item').click(function() {
$('#s').focus();
});


$('#backfon').click(function() {

$('#backfon').addClass('fadeOut');
$('#sea').addClass('fadeOutDown');
setTimeout(function () { $('#sea').hide(); $('#backfon').hide(); }, 500);

});

});

Либо еще один альтернативный скрипт (но нет эффекта при закрытии) — Закрытие элемента по клику за пределами его области (вне элемента)

$(document).ready(function() {

//Появление поиска + !курсор в строке поиска

$('.search-item').click(function() {

$('#sea').show();
$('#sea').addClass('animated fadeInDown');
$('#backfon').show();
$('#backfon').addClass('animated fadeIn');

});

//  курсор в строку поиска
$('.search-item').click(function() {
$('#s').focus();
});


});

// Закрытие элемента по клику за пределами его области (вне элемента)

jQuery(function($){
	$(document).mouseup(function (e){ // событие клика по веб-документу
		var div = $("#sea"); // тут указываем ID элемента
		if (!div.is(e.target) // если клик был не по нашему блоку
		    && div.has(e.target).length === 0) { // и не по его дочерним элементам
			div.hide(); // скрываем его
		        $('#backfon').hide(); 
		}
	});
});

CSS

#backfon {
	background-color: rgba(0, 0, 0, 0.5);
	background-image: url(https://opttour.ru/wp-content/themes/tester/images/bg-pattern.png);
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 999;
	display: none;
}

#sea {
	top: 50%;
	left: 50%;
	position: fixed;
	z-index: 9999;
	opacity: 0;
	width: 100px;
	height: 25%;
	transition: opacity .5s ease;
	-webkit-transition: opacity 0.5s ease 0s;
}

#searchform {padding:0; background:none;}

#s {
	padding: 10px;
	transition: width .3s ease-in-out;
	-webkit-transition: width 0.3s ease-in-out 0s;
	border: none;
	box-sizing: border-box;
	position: absolute;
	right: 0;
	z-index: 98;
}

#pic-sea {
	padding: 10px;
	border: none;
	position: absolute;
	right: 0;
	background-color: rgb(224, 22, 52);
	transition: background-color .3s ease;
	-webkit-transition: background-color 0.3s ease 0s;
	color: #fff;
	z-index: 99;
}

#pic-sea .fa {color: #fff !important;}

#pic-sea:hover {background-color: rgb(153, 8, 21);}

#searchform .fa {padding: 0 !important;}

Скрывать поиск

Скрывать поиск, если курсор больше не в поле ввода

$(document).on("focusout","#s",function(){
	$('#searchform').slideUp();
});

// или еще вариант
$('td.edit').on("blur","input",function(){
    alert("finally bye");
});

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Upgrade WC

Upgrade WC

Очередная серия улучшений (upgrade) плагина WC. Буду добавлять по мере изучения новые решения. Поиск по SKU (артикулу) Из коробки WC не ищет по артикулам (SKU). Но достаточно установить плагин Search Читать далее »

/
Поиск по категориям

Поиск по категориям

Стандартный поиск WordPress ищет по всему сайту. Добавим в поисковую форму выбор категории сужающий сектор поиска. Поиск по категориям WordPress Для поиска по категория WP в строку запроса необходимо добавить Читать далее »

Поиск по сайту

Поиск по сайту

Поиск по сайту — важнейший инструмент позволяющий находить на сайте любую информацию. Плагины расширяющие функционал поиска Relevanssi — A Better Search (100 000) — улучшает и расширяет результаты поиска, более Читать далее »

/

Добавить комментарий

Пока нет комментариев. Будь первым!

Кнопка всплывающего поиска (+ курсор в поиске) Кнопка всплывающего поиска (+ курсор в поиске)
Элементы управления плагином
Рекомендации для васЭлементы управления плагиномOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.