Простой lightbox на JavaScript без jQuery

30 июля 2014 Антон Кулешов 1846 0

Если порыться по интернету, то можно найти кучу вариаций по созданию lightbox. В основном их делают при помощи библиотек (jQuery). Когда сайт большой и скрипта много, это правильное решение. Зачем тратить время на всякие проверки, к тому же ещё и для ie придётся пол кода дописывать. Но если сайт не значительных размеров или вы не ориентируетесь на старые версии браузеров, то, тут я думаю, нет смысла тянуть библиотеку в десять тысяч строк кода, а то и больше, для реализации всплывающей подсказки или формы обратной связи.

Реклама

Относительно недавно мне и пришлось написать довольно простой lightbox. Конечно, я мог просто скачать скрипт и не тратить свое время. Но из-за того, что я люблю лишний раз поковыряться в коде, решил написать свой вариант.

При написании скрипта, передо мной стаяли три задачи:

  1. Написать не особо «мудрёный» lightbox;
  2. Поддержка последние версии браузера;
  3. И конечно, код на чистом JavaScript.

В самом начале написания необходимо разметить страницу и прописать необходимые стили. Начнем сначала с HTML:

<div id="buttom"></div>
<div id="block">
	<span id="close"></span>
</div>
<div id="overlay"></div>

По моей задумке будет две кнопки:

  • На вызываемом блоке, которая будет прятать элемент div с id=block;
  • И сама кнопка, отвечающая за появления элемента div с id=block.

Соответственно стили:

html, body{
	margin: 0;
	background-color: #ccc;
}
#buttom{
	width: 50px;
	height: 50px;
	background-color: #133783;
	position: fixed;
	left: 0;
	top: 50%;
	margin-top: -25px;
}
	#close{
		display: block;
		width: 25px;
		height: 25px;
		background-color: #ff0000;
		position: relative;
		top: 0;
		right: 0;
	}
	#block{
		width: 250px;
		height: 250px;
		position: fixed;
		top:50%;
		left: 50%;
		margin-left: -150px;
		margin-top: -125px;
		z-index: 900;
		background-color: #3B5998;
		display: none;
	}
/* Стили для скрипта */
.overlay_active{
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: #000;
}

Сам же скрипт будет делиться на 3 части:

  1. Задание параметров для lightbox;
  2. Обработка плавного затемнения;
  3. Обработка события клика по кнопкам и lightbox.
window.onload = function(){

	var lightbox = (function(){

		var settings = {

			block: 			"block",	// Блок к которому применям lightbox
			buttom: 		"buttom",	// Кнопка 1
			blockButtom: 	        "close",	// Кнопка на блоке
			overlay: 		"overlay",	// <div id="overlay"></div>
			speed: 			78,		// Время интервала
			step: 			5,		// Шаг измения прозрачности
			maxOp: 			0.6		// Максимальная прозрачность
		};
		
		function $(element){

			return top.window.document.getElementById(element);
		};
		
		var timer;
		var buttom 	= $(settings.buttom);
		var blockButtom	= $(settings.blockButtom);
		var overlay 	= $(settings.overlay);

		function deleteInterval(intName){

			window.clearInterval(intName);
			intName = null;
		};

		function hideAll(){

			var block = $(settings.block);
			block.style.display = "none";

			var overlay = $(settings.overlay);
			overlay.className = "";
			overlay.style.opacity = "0";
		};

		buttom.onclick 	= function(){

			var block = $(settings.block);
			block.style.display = "block";

			var overlay = $(settings.overlay);
			overlay.className = "overlay_active";
			overlay.style.opacity = "0";

			timer = setInterval(function(){

				var overlay = $(settings.overlay);
				var op = overlay.style.opacity;

				if(settings.maxOp <= 1){

					op = op * 100;
					op = op + (settings.step);
					op = op /100;

					if(op.toFixed(2) <= settings.maxOp){

						overlay.style.opacity = op;

						if((op.toFixed(2) % settings.maxOp) == 0){

							deleteInterval(timer);
						};
					};

					if(op.toFixed(2) > settings.maxOp){

						overlay.style.opacity = settings.maxOp;
						deleteInterval(timer);
					};
				}else{

					alert("Max opacity 1");
					overlay.style.opacity = 1;
					deleteInterval(timer);
				};
			}, settings.speed);
		};

		overlay.onclick = function(){

			deleteInterval(timer);
			hideAll();
		};

		blockButtom.onclick = function(){

			deleteInterval(timer);
			hideAll();
		};
	})();
};

Вот, что у меня в итоге получилось. В дальнейшем его можно существенно улучшить, а именно сделать кроссбраузерным. Что касается ie, работает начиная с девятого.

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Простой прогресс бар загрузки страницы

8 января 2016 Антон Кулешов

Создавая веб-приложение, не важно, какого уровня: будет ли это обычный веб-сайт или сервис, который принимает массу параметров и обрабатывает их на сервере – хорошей практикой является добавление прогресс бара (progress bar), за анимацией которого можно спрятать все времязатратные части нашего приложения.

Растянутый на всю ширину HTML список

20 июля 2014 Антон Кулешов

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

Протокол IMAP, или о том, как мы данные из писем вытаскивали

16 ноября 2015 Антон Кулешов

Электронная почта – это важнейший инструмент для обмена информацией и если вы её используете для работы, то наверняка сталкивались с ситуацией: на почту приходит письмо, в котором содержатся данные необходимые для обработки скрипом. Говорить мы будем о Яндекс почте – в этой статье я поделюсь с вами, дорогие читатели, опытом как достать письма из ящика, так же мы разберем вариант, когда в письме есть вложенный файл - как его обнаружить и в итоге скачать для дальнейших манипуляций над ним.