falbar Всплывающие окна на jQuery за 3 минуты

Всплывающие окна на jQuery за 3 минуты

8 сентября 2014 1849 0

Сегодня я расскажу о том, как сделать всплывающие окна на jQuery потратив на это 3 минуты своего времени. Данное решение будет включать в себя минимум кода.

Реклама

К сравнению, в одной из предыдущих статей я описывал решение лайтбокса на JavaScript, где можно увидеть, насколько получился громоздкий код, и это ещё без адаптации под старые версии браузеров.

Давайте приступим и для начала подключим библиотеку и файл, в котором будет находиться скрипт всплывающих окон. Так же для удобства вынесем стили в отдельный CSS файл:

<link href="main.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="lightbox.js" type="text/javascript"></script>

Добавим на страницу HTML структуру:

<!-- Кнопка для вызова -->
<span class="button lightbox">
   Нажми на меня
</span>
<!-- Вызываемый блок -->
<div id="block">
    <div class="close"></div>
 <p>Контент</p>
</div>

Теперь в CSS файле пропишем стили для кнопки и вызываемого блока:

body{
  background-color: #d8d5d4;
}
#block{
  width: 300px;
   top: 50%;
   left: 50%;
  margin-left: -150px;
    margin-top: -140px;
 border: 8px solid #D74745;
  background-color: #E7E7E7;
  border-radius: 9px;
 text-align: center;
 position: fixed;
    display: none;
  z-index: 9999;
}
.close{
  background: url(close.png) no-repeat center center;
 opacity: 0.5;
   height: 12px;
   width: 12px;
    opacity: 0.5;
   right: 7px;
 top: 5px;
   position: absolute;
 cursor: pointer;
}
   .close:hover{
       opacity: 1;
 }
.button{
   cursor: pointer;
    text-decoration: none;
  background-color: #fff;
 border-radius: 25px;
    font: bold 50px Verdana;
    color: #000;
    letter-spacing: 10px;
   padding: 5px 10px;
  text-align: center;
 border: 5px solid rgba(255, 0, 0, 0.6);
 box-shadow: 0 0 30px rgba(24, 124, 204, 0.8),
               1px 1px 1px rgba(0, 0, 0, 0.5) inset;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    width: 600px;
   display: block;
 margin: 100px auto 0;
}
  .button:hover{
      box-shadow: none;
   }

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

Осталось написать jQuery код. Выглядеть он будет так:

$(function(){

    var block = $("#block");

  $(".lightbox").on("click", function(){

      $("<div id='overlay'></div>")
           .css({
              "height": "100%",
               "position":"fixed",
             "width": "100%",
                "background": "#000",
               "opacity": "0",
             "top": "0",
             "left": "0",
                "z-index": "999"
            })
          .animate({"opacity": "0.5"}, "slow")
          .appendTo("body");

        block.fadeIn();

     $("#overlay, .close").on("click", function(){
           block.fadeOut("slow");
            $("#overlay").fadeOut("slow", function(){
               $(this).remove();
           });
     });
 });
});

Скрипт можно разделить на логические части. Нажимая на кнопку с классом lightbox, через код мы добавляем задний фон, причем стили к нему прописываем «на лету», далее показываем сам блок, сохранённый в переменной block. Вторая часть - это обработка событий закрытия при нажатии на задний фон и на див с классом close. Вначале мы прячем блок, а затем скрываем сам фон, после чего - удаляем его.

В принципе всё довольно просто и должно быть понятно.

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