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

30 июля 2014 Антон Кулешов 1985 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