Если порыться по интернету, то можно найти кучу вариаций по созданию lightbox. В основном их делают при помощи библиотек (jQuery). Когда сайт большой и скрипта много, это правильное решение. Зачем тратить время на всякие проверки, к тому же ещё и для ie придётся пол кода дописывать. Но если сайт не значительных размеров или вы не ориентируетесь на старые версии браузеров, то, тут я думаю, нет смысла тянуть библиотеку в десять тысяч строк кода, а то и больше, для реализации всплывающей подсказки или формы обратной связи.
Относительно недавно мне и пришлось написать довольно простой lightbox. Конечно, я мог просто скачать скрипт и не тратить свое время. Но из-за того, что я люблю лишний раз поковыряться в коде, решил написать свой вариант.
При написании скрипта, передо мной стаяли три задачи:
- Написать не особо «мудрёный» lightbox;
- Поддержка последние версии браузера;
- И конечно, код на чистом 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 части:
- Задание параметров для lightbox;
- Обработка плавного затемнения;
- Обработка события клика по кнопкам и 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, работает начиная с девятого.