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

Добавлено: 15 Февраля 2015 11:56:13 Добавил: Андрей Ковальчук Нравится 0

Добавить