Блог студии веб-дизайна «Make a Site» Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Выпадающее окно на сайте с помощью jQuery и ajax

Казалось бы, довольно простая задача и тема давно изъезженная вдоль и поперек — как сделать выпадающее окно на сайте при помощи jQuery.

Выпадающее окно на сайте с помощью jQuery и ajax
Содержание статьи

Предлагаем вашему вниманию нашу собственную разработку, отточенную с годами и примененную на десятках различных сайтов и проверенную во всех известных браузерах. Самое полное и изящное решение для выпадающего окна с использованием jQuery и ajax.

Тема эта довольно популярная, но, как оказалось, в интернете не так много достойных решений. Некоторые слишком громоздкие, некоторые недоработанные и совсем не кроссбраузерные. Мы решили сделать выпадающее окно по своему, не копируя сомнительные решения с форумов 5 летней давности от "бывалых" верстальщиков и программистов и с радостью представляем реализацию своим методом.

Использование выпадающего окна на сайте

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

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

Реализация выпадающего окна

Итак, что нам нужно сделать. Давайте разобьем нашу задачу на логические части и рассмотрим каждую из них подробно.

Стили выпадающего окна и фильтра (маски)

Для того, чтобы окно появилось, его сначала надо сверстать. Обычно это слой с абсолютным позиционированием, значение z-index у которого является наибольшим в вашем DOM-е. Также это окно нужно выровнять по центру экрана. И тут начинается интересное. Если ширину будущего окна мы можем предсказать заранее и установить ее фиксированной, то вот высоту не можем, потому что она зависит от количества контента, который туда подгрузится. Мы не ищем легких путей и предлагаем универсальный вариант, который всегда будет точно по центру экрана, независимо от того, сколько в выпадающем окне контента и какой он высоты. О том, как это сделать, немного позже.

Итак, CSS стили фильтра (полупрозрачной завесы) и самого выпадающего окна:

#filter-mask {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 100;
	top: 0;
	left: 0;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=85);
	-moz-opacity: 0.85;
	-khtml-opacity: 0.85;
	opacity: 0.85;
	display: none;
}
.black-mask {
	background: #000;
}
.white-mask {
	background: #fff;
	box-shadow: 0 0 15px 0 #999;
}
#popup-window {
	position: absolute;
	z-index: 102;
	background: #fff;
	width: 600px;
	top: 0;
	left: 50%;
	margin: 0 0 0 -300px;
	display: none;
	border-radius: 6px;
	border: #c9e3f0 8px solid; 
}
#popup-window .close-popup {
	width: 20px;
	height: 20px;
	position: absolute;
	background: #fff url(/i/close-popup.png) 0 0 no-repeat;
	margin: 10px 0 0 570px;
	cursor: pointer;
	box-shadow: 1px 1px 1px 0 #999;
	border-radius: 10px;
	opacity: 1;
}
#popup-window .close-popup:hover {
	opacity: 0.8;
}
#popup-window .close-popup:active {
	box-shadow: none;
	margin-top: 11px;
}
#popup-window .inner {
	padding: 15px 30px 30px 30px;
}
#popup-window h1 {
	padding: 0;
}

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

Смотрите что получается - мы установили ширину попапа в 600 пикселей, соответственно для того, чтобы выровнять его по центру экрана по горизонтали, мы просто пишем left: 50% и отступаем влево на половину ширины самого окна - margin: 0 0 0 -300px;. С шириной все очень просто. А с высотой пока ничего не делаем. Этим займется javascript чуть позже.

Скрипт выпадающего окна

Стоит подчеркнуть, что для работы этого скрипта необходима подключенная библиотека jQuery не важно какой версии, иначе просто ничего работать не будет. Рекомендуем также создать отдельный файл, например, popup.js и подключать его отдельно, скопировав в него приведенные в этой статье скрипты.

Итак, скрипт выпадающего окна:

$(document).ready(function() {

	$(document).on("click", ".alexboyko-popup", function(){
		ajaxPopup($(this).attr("ajax_file"), $(this).attr("title"));
		return false;
	});
	
	$(document).on("click", ".close-popup", function(){
		$("#popup-window, #filter-mask").remove();
	});
	
	$(window).resize(function(){
		$("#popup-window").css({ "top": ($(window).height() / 2) - ($("#popup-window").outerHeight() / 2) });
	});	
	
});

function ajaxPopup(file, title) {
	$.ajax({
		type: "POST",
		url: "/ajax/" + file,
		data: ({title : title}),
		dataType: "html",
		success: function(data) {
			$("#popup-window, #filter-mask").remove();
			$("body").append('
'); $("body").append(''); adjustPopup(); } }); } function adjustPopup() { if($("#popup-window").height()) { if($("div").is("#popup-window")) { $("#popup-window").css({ "top": ($(window).height() / 2) - ($("#popup-window").outerHeight() / 2) }); $("#filter-mask").css("height", $(document).height()).show(); $("#popup-window").animate({ "opacity": "show" }, 300); $("#popup-window input:eq(0)").focus(); $("html, body").animate({scrollTop: 0}, 200); } } else { setTimeout("adjustPopup()", 100); } }

Подробно разбирать все действия в данном скрипте мы не будем, а лишь опишем в общем, что происходит. При клике по ссылке с определенным классом, срабатывает выпадающее окно и посредством ajax обращается к файлу /ajax/[имя файла] на вашем сервере, после завершения выполнения скрипта (success), контент вставляется в выпадающее окно, слой выравнивается по вертикали, в зависимости от его полученной высоты и затем плавно появляется на экране. При закрытии уничтожается фильтр и само окно. Стоит отметить то, что окно не скрывается, а именно удаляется из DOM-а методом remove, ровным счет как и появляется изначально не присутствуя в DOM-е при помощи метода append.

Вызов выпадающего окна кликом по ссылке

Теперь, когда скрипт и стили подключены, нам осталось создать папку ajax в корне сайта и разместить в ней необходимые файлы, например файл с формой авторизации auth.php и т.д. Теперь просто вызовем нашу функцию кликом по ссылке такого вида:

<a class="alexboyko-popup dotted" title="Авторизоваться" href="/auth/">Войти</a>

Класс alexboyko-popup у нашей ссылки послужит инициацией для самого скрипта, класс dotted говорит о том, что ссылка подчеркнута пунктирной линией (добавите этот класс в свой css на свое усмотрение, обычно это text-decoration: none; border-bottom: #ff0000 1px dotted; и т.д.), а добавленный произвольно атрибут ajax_file="auth.php" укажет скрипту на то, что нужно взять файл /ajax/auth.php, выполнить и вставить результат в выпадающее окно посредством ajax. Атрибут title="Авторизоваться" будет использоваться в файле auth.php в качестве заголовка h1 и будет передан методом POST в том же ajax запросе. Все элементарно и просто.

А вот и демонстрация работы выпадающего окна:

открыть в новой вкладке

И да, чуть не забыл насчет иконки для закрытия выпадающего окна (/i/close-popup.png был указан в стилях). Вот она:

Пользуйтесь на здоровье 🙂



Предыдущая статья:
Полная очистка директории с помощью рекурсивной PHP-функции

Читайте также:
Проверка email адреса на валидность на PHP

Возможно, вам это интересно:



Блог студии веб-дизайна «Make a Site».
Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Текущий проект: «Stream Booster» — раскрутка Twitch и YouTube каналов

Студия веб-дизайна «Make a site»