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

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

30 июля 2014 3550 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