SiteIS

jQuery - безграничные возможности в дизайне Вашего сайта!

- Один из самых популярных на сегодня среди веб разработчиков фреймворк

- Позволяет быстро и легко создать потрясающие веб-приложения

- Удивительно красивые анимационные эффекты

- Улучшение пользовательского интерфейса

Всплывающие окна (popup)

Перво-наперво распишем подробнее, что предстоит сделать.

На html странице должно располагаться несколько кнопок (скажем, три, но, если хочется, то может быть и больше). По нажатию на кнопки будут появляться всплывающие окна (popup) с различным содержанием. Для наглядности примера в первое окно поместим форму с регистрацией, во второе - картинки и в третьем окне, что бы продемонстрировать всю безграничность возможностей метода, расположим табы (вкладки с содержимым). При показе попапа страница должна перекрываться темным прозрачным фоном. В каждом всплывающем окне должна присутствовать интуитивно понятная любому пользователю пиктограмма, закрывающая окно.

По ссылкам ниже можно скачать готовый код примера, или перейти на демо страницу:

Скачать готовый код Посмотреть Demo

На первый взгляд задачка сложновата, но это только на первый взгляд. Разметим кнопки, вызывающие окна:

<div class="link_group">
	<a class="show_popup" rel="reg_form" href="#">Зарегистрируйтесь</a>
	<a class="show_popup" rel="photo_win" href="#">Галерея</a>
	<a class="show_popup" rel="tabs_info" href="#">Окно со вкладками</a>
</div>

Все кнопки оформим в виде ссылок, зададим им общий класс (у меня это show_popup) и положим внутрь div-а с каким нибудь произвольным классом (я назвал этот блок link_group). Для того, что бы по клику на определенную кнопку открывалось нужное окно, добавим каждой ссылке атрибут rel параметр которого будет в точности соответствовать названию класса попапа.

Осталось с помощью стилей зааккуратить кнопки и работу над ними можно считать законченной:

/**********popup links**********/
.link_group {
margin:20px auto;
width:555px;
text-align:center;
}
.link_group a {
margin:0 20px;
padding:5px 15px;
color:#000;
font-weight:bold;
display:inline-block;
vertical-align:top;
*display:inline;
*zoom:1;
position:relative;
text-decoration:none;
text-transform:uppercase;
border:1px solid #ccc;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
behavior: url(PIE.htc);
}
.link_group a:hover {
color:#cc0000;
}

По большому счету, в стилях все понятно - центрируем блок со ссылками, закругляем углы, для ИЕ 7-8 подключаем PIE. В итоге кнопки выглядят одинаково во всех, распространенных на сегодняшний день, браузерах.

Займемся попапами. HTML разметка для всех окон будет одинакова. Различия касаются лишь размеров (ширины) и содержимого попапов.

Первым разметим попап с формой регистрации:

<div class="popup reg_form">
	<a class="close" href="#">Close</a>
	<h2>Регистрация на сайте</h2>
	<form method="post" action="">
		<label for="login">Введите логин:</label>
		<input type="text" name="login" />
		<label for="password">Введите пароль:</label>
		<input type="password" name="password" />
		<input type="submit" value="Войти" />	
	</form>
</div>

Для самого первого обертывающего блока задаем двойной класс (popup reg_form) через пробел (обратите внимание, что имя reg_form соответствует атрибуту rel первой кнопки). Это позволит написать общие стили для всех окон и задать различные параметры для каждого окна отдельно.

Вторым разметим попап с картинками:

<div class="popup photo_win">
	<a class="close" href="#">Close</a>
	<h2>Галерея</h2>
	<div class="img_wrap">
		<img alt="" src="/images/pic_1.png" />
		<img alt="" src="/images/pic_2.png" />
		<img alt="" src="/images/pic_3.png" />
		<img alt="" src="/images/pic_2.png" />
		<img alt="" src="/images/pic_3.png" />				
		<img alt="" src="/images/pic_1.png" />				
	</div>
</div>

Здесь так же задаем двойной класс (popup photo_win), путь к картинкам указывается к той папке, где эти картинки находятся.

И, наконец, разметим третий попап. Так же, как и в двух первых вариантах, обертывающему блоку задаем общий (popup) и индивидуальный (tabs_info) классы. Само содержание (разметку табов) возьмем из статьи "Универсальные вкладки на jQuery" и немного подправим под данную задачу.

<div class="popup tabs_info">
	<a class="close" href="#">Close</a>
	<h2>Вкладки (tabs)</h2>		
	<div class="selectTabs">
		<ul class="lineTabs">
			<li class="active"><a href="#">Удобства вкладок</a></li>
			<li><a href="#">Преимущества вкладок</a></li>
		</ul>
		<div class="tab_content">
			<div class="tab1">
				<p>Tabs - элемент интерфейса для отображения группы документов таким образом, что только 1 активный документ показан, а остальные спрятаны. Пришёл этот элемент интерфейса в компьютеры из офисного быта: папки с документами разделялись такими закладками на группы. Ну и конечно телефонные книги часто разделены табами по алфавиту.</p>
			</div>
			<div class="tab2">
				<p><img alt="" src="/images/tabs.jpg" /> Табы показаны в одном месте, рядом. Отсюда — удобство навигации. И целостность навигации, что тоже важно. Все уже привыкли к табам, так как видят и используют их везде (те же телефонные книжки, каталоги в библиотеках, и т.д.). А значит и домохозяйка знает, как они работают.</p>
			</div>
		</div>
	</div>			
</div>

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

/**********All styles popup**********/
.popup {
padding:5px 15px 15px;
position:fixed;
top:100px;
left:50%;
display:none;
overflow:hidden;
border:1px solid #ccc;
background:#fff;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
z-index:100;
behavior: url(PIE.htc);
}
.popup h2 {
font:bold 18px/32px Arial, san-serif;
}
.popup a.close {
width:16px;
height:16px;
display:block;
text-indent:-9999px;
position:absolute;
top:10px;
right:10px;
background:url(../images/close.png) no-repeat;
}

Все попапы будут отцентрированы по горизонтали, оснащены кнопкой, закрывающей окно и их заголовки будут оформлены одинаково. При загрузке страницы все три окна будут скрыты (правило display:none; для дива с классом popup).

Подошла очередь оформить каждое отдельное окно.

Стили для окна с регистрацией.

/**********popup with form**********/
.reg_form {
margin-left:-200px;
width:400px;
}
.reg_form form {
margin-top:10px;
}
.reg_form label {
width:100px;
height:26px;
font:bold 12px/26px Arial, san-serif;
display:inline-block;
vertical-align:top;
*display:inline;
*zoom:1;
}
.reg_form input[type=text], .reg_form input[type=password] {
margin-bottom:10px;
padding:0 3px;
width:274px;
height:22px;
font:bold 12px/26px Arial, san-serif;
border:1px solid #ccc;
}
.reg_form input[type=submit] {
margin:10px 15px 0 0;
padding:3px 10px;
float:right;
background:#ccc;
border:0;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
font:bold 10px Arial, san-serif;
text-transform:uppercase;
position:relative;
cursor:pointer;
behavior: url(PIE.htc);
}
.reg_form input[type=submit]:hover {
color:#fff;
}

Стили для окна с картинками.

/**********popup with pictures**********/
.photo_win {
margin-left:-250px;
width:500px;
}
.img_wrap {
margin-top:10px;
width:100%;
overflow:hidden;
}
.img_wrap img {
margin:0 10px 10px;
height:187px;
}

Стили для окна с табами.

/**********popup with tabs**********/
.tabs_info {
margin-left:-250px;
width:500px;
}
/*tabs links*/
.selectTabs {
margin:10px 0 0;
width:100%;
}
.lineTabs {
width:100%;
float:left;
list-style:none;
}
.lineTabs li {
margin:0 0 -1px 10px;
float:left;
position:relative;
z-index:1;
border:1px solid #ccc;
}
.lineTabs li.active {
border-bottom:1px solid #fff;
}
.lineTabs li.active a {
color:#cc0000;
}
.lineTabs a {
padding:4px 15px;
display:block;
text-decoration:none;
color:#000;
font-weight:bold;
font-size:10px;
text-transform:uppercase;
}
/*tabs content*/
.tab_content {
width:100%;
float:left;
border:1px solid #ccc;
-moz-border-radius:0 0 5px 5px;
-webkit-border-radius:0 0 5px 5px;
border-radius:0 0 5px 5px;
position:relative;
behavior: url(PIE.htc);
}
.tab_content div{
display:none;
}
.tab_content .tab1 {
display:block;
}
.tab_content .tab1, .tab_content .tab2 {
padding:10px 5px;
}
.tab_content img {
margin:0 10px 5px 0;
float:left;
}

И последнее, что нужно сделать, прежде, чем приступить к скрипту, прописать стиль для затемненного фона. Он будет показываться ниже всплывающих окон, перекрывая весь контент на странице.

/**********overlay styles**********/
#overlay {
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
display:none;
background:#000;
opacity:.8;
}

Марафет наведен, осталось придать всей красоте интерактивности и "дело в шляпе". Нам понадобится написать скрипт для вкладок, которые размещены в одном из всплывающих окон и скрипт для попапов. Заострять внимание на скрипте для табов не будем, он рассматривался все в той же статье - "Универсальные вкладки на jQuery". А вот на скрипт для попапов обсудим подробно.

Весь js будет следующим:

$(function () {
	//script for popups
	$('a.show_popup').click(function () {
		$('div.'+$(this).attr("rel")).fadeIn(500);
		$("body").append("<div id='overlay'></div>");
		$('#overlay').show().css({'filter' : 'alpha(opacity=80)'});
		return false;				
	});	
	$('a.close').click(function () {
		$(this).parent().fadeOut(100);
		$('#overlay').remove('#overlay');
		return false;
	});
	
	//script for tabs
	$("div.selectTabs").each(function () {
		var tmp = $(this);
		$(tmp).find(".lineTabs li").each(function (i) {
			$(tmp).find(".lineTabs li:eq("+i+") a").click(function(){
				var tab_id=i+1;
				$(tmp).find(".lineTabs li").removeClass("active");
				$(this).parent().addClass("active");
				$(tmp).find(".tab_content div").stop(false,false).hide();
				$(tmp).find(".tab"+tab_id).stop(false,false).fadeIn(300);
				return false;
			});
		});
	});
});

Разберем подробнее, чего тут таково мы понаписали (напоминаю, рассматриваем только ту часть скрипта, которая отвечает за показ скрытых окон).

Перво-наперво, разыскиваем все ссылки с классом show_popup и отслеживаем когда по ним кликнет пользователь.

Если такое событие произошло, ищем блок, класс которого индентичен атрибуту rel ссылки, по которой кликнули ($('div.'+$(this).attr("rel"))) и с помощью метода анимации .fadeIn(500) показываем этот блок (установленный в скобках параметр указывает на то, что блок будет проявляться на странице в течении 500 миллисекунд).

Далее с помощью метода .append("<div id='overlay'></div>") в самый конец body помещаем пустой блок с id=overlay (оформление для этого блока задавалось в таблице стилей) и, поскольку он является скрытым, с помощью метода .show() делаем его видимым.

Последним действием в цепочке, вызванной событием click(), устраняем возможные проблемы с прозрачностью (.css({'filter' : 'alpha(opacity=80)'})) в горяче любимых ИЕ браузерах. Кстати, это правило можно было вынести и в таблицу стилей. Тут уже каждый решает, как ему удобнее, сам.

Проделав кучу вышеописанных операций, уходим в режим ожидания и находимся в этом состоянии до тех пор, пока пользователь не кликнет по крестику (ссылка с классом close). Как только это произошло, снова засучим рукава.

С помощью метода .parent() отыщем родителя для ссылки, по которой кликнули и спрячем найденный блок (метод .fadeOut(100)). Что бы исчезал блок не слишком резко, зададим временной интервал 100 миллисекунд (можно больше - как кому нравится).

Затем разыскиваем блок с id=overlay и при помощи метода .remove('#overlay') удаляем его со страницы, после чего снова ожидаем, когда пользователь кликнет по какой нибудь из кнопок.

Стоит сказать еще пару слов по поводу записи return false;. Она применяется для того, что бы запретить браузеру осуществлять переход по ссылкам, используемым в конструкции.

Вот, пожалуй и все. Успехов в использовании...

Автор: Super User

Комментарии  

 
+1 # Руслан 27.05.2013 11:23
Отличная инструкция!
Завис на одном моменте, когда добавляешь в попуп много контента он растягиваеться по вертикале и часть контента не показываеться, вот для таких моментов нужна возможсть скролинга контента в самом popup окне.

Что и куда надо дописать, что бы это заработало?)
Ответить | Ответить с цитатой | Цитировать
 
 
+4 # Admin 27.05.2013 12:37
Если я вас правильно понял, то вам требуется горизонтальный скроллл в окне. Что бы его получить, в css пропишите для основного всплывающего окна свойство overflow-x:auto;
В этом случае, если контент не помещается по ширине в окно попапа, появится горизонтальная полоса прокрутки.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Руслан 27.05.2013 12:54
Неа не появилось)
И вы похоже не так поняли. Прикладываю скрин: http://cs320720.vk.me/v320720058/1d7e/3_5rI08fp-8.jpg
Скрин сделан по самый край странички. Более 60% контета скрыто, а нужна возможность скролить.

Нужно что бы, если попап имеет много контента в высоту(по вертикале), окно popup фиксировалось и появлялся вертикальный скрол контента в попапе.
Ответить | Ответить с цитатой | Цитировать
 
 
+4 # Admin 27.05.2013 13:08
Установите для попапа фиксированную высоту и свойство overflow:auto;

Пример:

.photo_win {
margin-left: -250px;
width: 500px;
height: 200px;
overflow: auto;
}
Ответить | Ответить с цитатой | Цитировать
 
 
+1 # Руслан 27.05.2013 13:31
Отлично заработало! Спасибо большое!

Но появились еще вопросы, думаю в будущем это будет полезно всем))

1. Теперь при скролинге, уезжает на верх крестик, следовательно, что бы закрыть окно нужно его обезательно мотать назад и кликать.
Было бы классно, если бы она прикреплялась жестков верхнем правом углу?!

2. Сейчас если кликаешь на черный фон, который прикрывает собой весь контент не чего не происходит. А было бы здорово, если бы при клике на черный фон попап просто закрывался бы, как это происходит сейчас при нажатии на крестик?!
Ответить | Ответить с цитатой | Цитировать
 
 
+5 # Admin 27.05.2013 14:09
Что бы не уезжал крестик, свойства, описанные выше присвойте блоку с контентом.

.img_wrap {
margin-top: 10px;
width: 100%;
height:200px;
overflow: auto;
}

Касательно второго вопроса - чтобы окно закрывалось при щелчке на области вне попапа - понадобится изменить скрипт. Как это сделать, опишу в ближайшем будущем.
Ответить | Ответить с цитатой | Цитировать
 
 
+2 # Дмитрий 12.06.2013 17:16
Добрый день спасибо за скрип.

Подскажите пожалуйста как сделать чтоб один из выше указанных блоков появлялся автоматически а не при нажатии по ссылки - к примеру регистрация чтоб вылетала при загрузки страницы.

Подключаюсь к выше упомянутому вопросу - былоб здорово чтоб окно закрывалось при нажатии на фон,а не только на крестик.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # admin 12.06.2013 17:44
Самый простой и быстрый способ решить первый ваш вопрос - это добавить в самое начало скрипта строки, делающие видимым попап с регистрацией и затемняющий слой:

$(function () {
$('.reg_form'). fadeIn();
$("body").append("...сюда вставляем html код блока с затемняющим окном...");
$('#overlay').show().css({'fil ter' : 'alpha(opacity= 80)'});
//script for popups
...остальной код...

Но, на мой взгляд, это будет раздражать посетителя...

Что бы решить второй ваш (и не только ваш) вопрос потребуется (опять же в самое начало скрипта) вставить следующее:

$('body').click(function() {
$('div.popup'). hide();
$('#overlay').remove('#overlay');
});

а в строке, где отлавливается событие click, дать название функции и в самой функции запретить, так называемое, всплытие события с помощью метода stopPropagation();

$('a.show_popup').click(function (event) {
event.stopPropagation();
...остальной код...
Ответить | Ответить с цитатой | Цитировать
 
 
-1 # Дмитрий 12.06.2013 18:00
Благодарю - загрузка формы регистрации происходит так как надо. :-)

Единственно к сожалению не показывается черный бэкграунд с прозрачностью :cry: . Подскажите как поправить?

Если с первым вопросом у меня проблем почти не встало, то со вторым все оказалось куда сложнее :o (*не понял что куда и где поправить)

Выложите пожалуйста архив с возможностью загружать - например окно регистрации при загрузки страницы, и с функцией закрытия поп-окна при нажатии не только на крестик но и на бэкграунд.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Дмитрий 12.06.2013 18:16
Спасибо Вам за помощь, вообщем-то с прозрачным бэкглаундом разобрался:

необходимо было дописать строчку:

$("body").append("");

то есть целиком функция открытия автоматом - например регистрации выглядит так *возможно кому-нибудь пригодится так же как и мне:

$(function () {
$('.photo_win').fadeIn();
$("body").append("");
$('#overlay').show().css({'filter' : 'alpha(opacity=80)'});

****************************************

Что касательно закрытие поп-окна не только по крестику но и по клику на "пустое" место так и не разобрался пока.

Подскажите пожалуйста более подробно- пошагово что на что надо заменить. (*где конкретно надо запретить функцию и какой командой)

Заранее спасибо.
Ответить | Ответить с цитатой | Цитировать
 
 
-1 # Дмитрий 12.06.2013 18:53
Здравия Вам вновь! :-)

К ранее заданным вопросам хочу адресовать еще)):

Вот поп-ап окно вылетает у меня автоматом как хотел. но столкнулся с другой проблемой, при переходе по страницам сайта поп-окно постоянно теперь у меня выскакивает, что вообщем-то не удобно.

Подскажите возможно ли, в данном скрипте организовать чтоб поп-окно вылетало только однажды при первом заходе пользователя на сайт, далее человек переходить по страницам сайта без появления окна?, но стоит человеку покинуть сайт предположим на 10 мин как поп-окно опять будет красоваться у него перед глазами при новом заходе?
Ответить | Ответить с цитатой | Цитировать
 
 
-1 # Дмитрий 12.06.2013 18:55
И крайний вопрос на данным момент:

Возможно ли реализовать в данном скрипте, чтоб поп-окно вылетало только для незарегистриров анных пользователей, но стоит человеку авторизоваться- зарегистрироват ься как окно более его не беспокоило?

(*желательно с функцией тайм-аута о которой спрашивал выше, то есть если человек не хочет регится, закрывает поп-окно и пользуется сайтом сколько ему заблагорасудитс я, но стоит ему покинуть его более чем например на 10 мин, как опять окно вылетает перед ним напоминая что надо авторизоваться- зарегистрироват ься.)

Надеюсь что и на ранее поставленные вопросы дадите исчерпывающие ответы)

С уважением Дмитрий
Ответить | Ответить с цитатой | Цитировать
 
 
0 # admin 13.06.2013 10:23
Ну вы прямо закидали вопросами :-)

Закрыть окно по щелчку вне области попапа, но при этом оставить возможность работать с элементами внутри его можно, если добавить в скрипт следующую функцию:

$(document).click(function(e){
var e = e || window.event,
x = e.srcElement || e.target;
if (x != $('.popup') && !$(x).parents(' .popup').size() ) {
$('.popup').fadeOut();
$('#overlay').remove('#overlay');
}
});
Ответить | Ответить с цитатой | Цитировать
 
 
+2 # admin 13.06.2013 10:24
Что же касается остальных вопросов, то простыми способами ваши желания не реализовать. Тут потребуется задействовать куки, проверять зарегистрирован пользователь, или нет, осуществлять проверку на количество загруженных им страниц. В общем, это уже отдельная тема, выходящая за рамки этой статьи.
В ближайшем будущем я постараюсь подготовить материал, который бы помог реализовать все ваши просьбы, но тут, сами понимаете, дефицит со временем. Вам остается либо ожидать, либо поискать решение на других ресурсах. :-)
Ответить | Ответить с цитатой | Цитировать
 
 
-2 # Дмитрий 13.06.2013 20:12
И на том спасибо :-) Буду ожидать статьи :-* Что касательно поисков на пространстве интернета, есть много подобного, но все не то, потому буду ждать вашего поста на заданные вопросы :zzz

Если с проверкой зарегистрирован ли пользователь или нет как понимаю времени надо не мало чтоб до работать скрипт и вообще отдельную тему создавать, то может быть тайм-аут реально организовать без лишних усилий? :-)
(*писал о нем ранее)
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Евгений 30.06.2015 11:03
Цитирую admin:
Самый простой и быстрый способ решить первый ваш вопрос - это добавить в самое начало скрипта строки, делающие видимым попап с регистрацией и затемняющий слой:

$(function () {
$('.reg_form'). fadeIn();
$("body").append("...сюда вставляем html код блока с затемняющим окном...");
$('#overlay').show().css({'fil ter' : 'alpha(opacity= 80)'});
//script for popups
...остальной код...
.

Приветствую!
Хоть этой теме уже почти два года... но вдруг Автор читает :)
Ни как не получается вставить затемнение. Вылазит белый фон и хоть ты тресни.
Можете подсказать, что именно нужно указать в этой строке:
$("body").append("...сюда вставляем html код блока с затемняющим окном...");
Ответить | Ответить с цитатой | Цитировать
 
 
-1 # Алексей 24.07.2014 10:39
Добрый день, уважаемый администратор. Хотел бы попросить у Вас совета и помощи по реализации данного скрипта на Вордпрессе. А именно, мне нужно сделать виджет в котором будет данная кнопка, по нажатии на которую высветится окошко с текстом. Подскажите, пожалуйста, как это сделать, т.к. я не слишком силен в этом, а скрипт нужно установить. Заранее Вам благодарен. С уважением, Алексей.
Ответить | Ответить с цитатой | Цитировать
 
 
+2 # Егор 13.08.2014 16:40
Не работает...
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Роман 26.10.2014 14:54
Здравствуйте. Огромное спасибо за урок!
Появился вопрос.
Допустим мы вызвали всплывающее окно с формой логина пользователя, а в этой форме имеется пункт регистрации нового пользователя, или восстановления пароля, и она ссылается на другую форму, которая, в свою очередь, должна вызывать такое-же всплывающее окно. Нужно чтобы предыдущая форма автоматически закрывалась, в случае перехода по гиперссылке. Поможете реализовать?
Ответить | Ответить с цитатой | Цитировать
 
 
0 # admin 26.10.2014 18:52
Вам просто понадобится повесить событие вызова другого попап окна на нужную ссылку (допустим, формы восстановления пароля) и по этому же клику закрывать текущее окно не трогая фона затемнения.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Роман 27.10.2014 11:46
Я так понимаю код должен быть аналогичным закрывающему скрипту, но без скрытия оверлея.
$('a.show_popup').click(function () {
$(this).parent().fadeOut(100);
return false;
});
но ранее в скрипте для этого класса описаны другие условия, и такой метод не работает.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Виталий 13.11.2014 14:40
Добры день, установил скрипт себе на сайт, скрип в данном случае нужен что бы пользователь мог посмотреть размеры.

Но столкнулся с проблемой, например тут
http://www.shop-shock.ru/product/nike-air-max-90-multicolour-s-mekhom-zimw07/

при открытии popup виден блок в контакте, кнопка купить, и если popup открывается над изображением товара, то по нему водится лупа, как при наведении на изобрежнее товар и естественно никакие вкладки не нажимаются.

Тоесть работают другие скрипты, можно сделать так что бы окошко "перекрывало" скрипты и видно было только его.

Например кнопка купить в 1 клик у меня на сайте работает как нужно, тоесть когда открывается окошко с ней, то больше ничего другого нажать нельзя и лупу тоже не видно, зарание спасибо.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Админ 13.11.2014 15:05
Если я правильно вас понял, то проблема заключается в том, что затемнение не перекрывает все блоки. В вашем случае достаточно будет в css прописать z-index элементу #overlay

#overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: none;
background: #000;
opacity: .8;
z-index: 150;
}
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Александр Крутицких 02.03.2015 19:11
Здравствуйте! Подскажите как реализовать такой же принцип, но чтобы в окне можно было размещать только произвольный текст с ссылкой (открывающейся в новом окне).
Требуется чтобы при заходе на сайт секунд через 5 всплывало небольшое окно(по центру), а в нем предлагалось перейти на определённую заданную страницу.
С уважением!
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Андрей 30.05.2015 00:33
Добрый день .Подскажите пожалуйста как можно вставлять рекламный блок от гугл (чтобы он отображался в сплывающем окне )?
Ответить | Ответить с цитатой | Цитировать
 
 
+1 # Юрий 18.11.2015 22:14
Возможно кому то помогу. Друзья если у вас не появляются картинки! Путь к файлам картинок в блоке с табами у автора такой т.е в папке images, но у меня фото показываются лишь тогда, если я пишу такой путь ( убираю / перед ссылкой на папку с файлом) все отлично.
Ответить | Ответить с цитатой | Цитировать
 
 
-1 # Николай 01.03.2016 01:11
Всем привет смог кто исправить ошибку которая выдаёт валидатор ?
Ошибка : Неправильное значение reg_form для атрибута rel на элементе в : Строка reg_form не является зарегистрирован ным ключевым словом.
Ответить | Ответить с цитатой | Цитировать