Показать Меню
falbar Lightbox на javascript

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

Lightbox на javascript

Если порыться по интернету, то можно найти кучу вариаций по созданию 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, работает начиная с девятого.

Подписаться на обновления

Комментариев еще не оставлено