Всплывающее модальное окно на jQuery 


Всплывающее модальное окно на jQuery

Опубликовано

 Всплывающее модальное окно по центру экрана на jQuery

По данной ссылке вы можете ознакомится с реализацией всплывающего модального окна в виде плагина

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

С помощью библиотеки jQuery можно без особых сложностей создать всплывающее модальное окно. Технология очень проста, и реализуется с помощью двух div блоков. Первый представляет собой background, а второй непосредственное само окно с содержимым.

HTML

<a href="#">Модальное окно</a>
<div class="modal_bg"></div>
<div class="modal_window">
  <button>Close Window</button>
</div>

CSS

<style type="text/css">
  .modal_bg{
    position:absolute;
    display:none;
    z-index:1000;
    left:0;
    top:0;
    background-color:#A8A8A8;
  }
  .modal_window{
    position:absolute;
    display:none;
    left:50%;
    z-index:1100;
    width:600px;
    margin-left:-300px;
    height:300px;
    background:#ffffff;
  }
</style>

jQuery

Разложим код на составляющие:

1. Плавное анимационное наложение на страницу, серого фона, с помощи блока <div class="modal_bg">;

$(".modal_bg").css({
  "width":$(document).width(),
  "height":$(document).height()
});
$(".modal_bg").fadeIn(1000);
$(".modal_bg").fadeTo("slow",0.8);

  • $(".modal_bg").css({"width":$(document).width(),"height":$(document).height()}) - присвоение блоку DIV, ширины и высоты равных ширине и высоте всего документа, т.е. блок будет растянут на всю страницу ;
  • fadeIn(1000) – плавное появления блока (за 1000 миллисекунд);
  • fadeTo("slow",0.8) – плавное изменение прозрачности блока;

 

2. Расположение модального окна <div class="modal_window"> по центру экрана. При расчете координат окна по высоте, необходимо учитывать скроллинг документа.

var Top_modal_window = $(document).scrollTop() + $(window).height()/2-$(".modal_window").height()/2;
$(".modal_window").css({"top":Top_modal_window+"px","display":"block"});

  • var Top_modal_window – Переменная содержит значение отступа по высоте, от начала страницы;
  • $(".modal_window").css({"top":Top_modal_window+"px","display":"block"}) – изменение свойств модального окна, т.е. установление позиции отступа, и отображение его на экране;

 

3. Запрет скроллинга документа, во время отображения модального окна;

$("body").css({"overflow":"hidden"});

 

4. Компоновка кода рассмотренного выше в функцию, вызываемая при нажатии на ссылку <a href="#">Модальное окно</a>

$(document).ready(function(){
  $("a").click(function() {
    Код рассмотренный выше;
  });
});

 

5. Функции скрывающие модальное окно :

  • При клике вне области модального окна:

$(document).ready(function(){
  $(".modal_bg").click(function () {
    $(".modal_bg, .modal_window").hide();
    $("body").css({"overflow":"auto"});
  });
});

  • При клике на кнопке "Close Window;

$(document).ready(function(){
  $(".modal_window button").click(function () {
    $(".modal_bg, .modal_window").hide();
    $("body").css({"overflow":"auto"});
  });
});

  • $(".modal_bg, .modal_window").hide() – скрывает модальное окно и фон;
  • $("body").css({"overflow":"auto"}) – скроллинг вновь доступен;

 

Полный код jQuery будет выглядеть следующим образом:

<script type="text/javascript">
$(document).ready(function(){

  $("a").click(function() {

    //Ширина и высота всего документа
    var HeightDocument = $(document).height();
    var WidthDocument = $(document).width();
    //Ширина и высота окна браузера
    var HeightScreen = $(window).height();
   
    //Плавное анимационное наложение на страницу серого фона
    $(".modal_bg").css({"width":WidthDocument,"height":HeightDocument});
    $(".modal_bg").fadeIn(1000);
    $(".modal_bg").fadeTo("slow",0.8);
   
    //Расположение модального окна с содержимым по высоте учитывая скроллинг документа
    var Top_modal_window = $(document).scrollTop() + HeightScreen/2-$(".modal_window").height()/2;
    $(".modal_window").css({"top":Top_modal_window+"px","display":"block"});

    //Запрет на сколлинг страницы
    $("body").css({"overflow":"hidden"});
    return false;
  });

  //При клике на кнопке "Close Window", модальное окно и фон скрываются
  $(".modal_window button").click(function () {
    $(".modal_bg, .modal_window").hide();
    $("body").css({"overflow":"auto"});
  });

  //При клике вне области модального окна, фон и модальное окно скрываются
  $(".modal_bg").click(function () {
    $(".modal_bg, .modal_window").hide();
    $("body").css({"overflow":"auto"});
  });
});
</script>