стильное окно поиска во всплывающем окне

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

Вариантов оформления самого окна поиска, достаточно много. Сегодня хочу предложить ещё один - окно поиска в полноэкранном варианте. При нажатии вся форма поиска откроется на всю страницу. Сам по себе код стандартный, но мы добавим в стили элемент прозрачности, используя свойство opacity:0.8;. Это придаст ему более элегантный и современный стиль. Плюс ещё сделаем кнопку "ЗАКРЫТЬ", опять же, для удобства . 

Основные особенности

В блоге устанавливается достаточно просто - в гаджет HTML/JavaScript

Без подключения сторонних библиотек и JavaScript 

Настраиваемые стили CSS

Быстрая загрузка

Работает со всеми браузерами

 

В работе его можно проверить на тестовом блоге в сайдбаре. Введите, допустим, слово БЛОК.

Демонстрация

Код

<style>

#search-box {

position: relative;

width: 100%;

margin: 0;

}

#search-form {

height: 40px;

border: 1px solid #999;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

background-color: #fff;

overflow: hidden;

}

#search-text {

font-size: 14px;

color: #ddd;

border-width: 0;

background: transparent;

}

#search-box input[type="text"] {

width: 90%;

padding: 11px 0 12px 1em;

color: #333;

outline: none;

}

#search-button {

position: absolute;

top: 0;

right: 0;

height: 42px;

width: 80px;

font-size: 14px;

color: #fff;

text-align: center;

line-height: 42px;

border-width: 0;

background-color: #2EB0EC;

-webkit-border-radius: 0px 5px 5px 0px;

-moz-border-radius: 0px 5px 5px 0px;

border-radius: 0px 5px 5px 0px;

cursor: pointer;

}

</style>

<style>

#popup_searchBox {position:fixed;top:0;left:0;width:100%;height:100%;background:#000000;opacity:0.8;z-index:9999999;}

#popup_searchBox{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000;opacity:0.8;}

#popup_searchBox_Data{position:absolute;top:50%;left:50%;width:300px;height:100px;margin:-50px 0 0 -150px;color:#FFFFFF;z-index:9999;}

</style>

<style>

.search-form-wrapper{background:#000;background:rgba(0,0,0,.8);z-index:99;position:fixed;width:100%;height:100%;left:0;top:0;display:none}.search-form,.search-form-label,.search-form-overlay,.search-text{position:absolute;left:0}.search-form{width:100%;height:1px;top:40%;text-align:center}.search-form-label{bottom:100%;width:100%;display:block;color:#fff;font-size:40px;font-weight:100}.search-text{top:100%;width:50%;right:0;margin:20px auto 0;background:0 0;border:none;border-bottom:1px dashed #ddd;font-size:60px;color:#fff;text-align:center;outline:0;min-width:300px}.search-form-overlay{width:100%;height:100%;top:0}

</style>

<div id="search-box">

<form action="/search" id="search-form" method="get" target="_top">

<input onclick="document.getElementById(&#39;popup_searchBox&#39;).style.display = &#39;block&#39;;" id="search-text" name="q" placeholder="" type="text" />

</form>

</div>

<div id="popup_searchBox" style="display:none;">

<div id="popup_searchBox_Data">

<!-- Search Box -->

<div class="search-form-wrapper" style="display: block;">

<div class="search-form-overlay"></div>

<form action="/search" class="search-form" method="get">

<label class="search-form-label">Введите ключевое слово  и нажмите Enter <button onclick="document.getElementById('popup_searchBox').style.display = 'none';">Закрыть</button></label>

<input class="search-text" name="q" type="text" value="" />

<button class="hide search-submit" style="display:none;" type="submit"><trans>Поиск</trans></button>

</form>

</div>

<!-- Search Box -->

</div>

</div>

Со стилями вы можете поэкспериментировать, исходя из вашего вкуса. В примере окно на черном фоне. Меняйте как вам нужно background:#000000;.цвет шрифта color:#FFFFFF; и размер font-size:60px;

 Название гаджета по вашему желанию, как и текстовые поля в стильном окне поиска. 

Фиксированное окно поиска

Меню с окном поиска

Всем удачи и до встречи.

Здесь вы можете оформить подписку на новые шпаргалки

Введите Ваш email