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

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

Форму поиска и подложку вставляем в шапку (например, после открытия 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");
});

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