jQuery: Всплывающие окна для начинающих

Radiocity · April 2, 2012

Вступление

В этой теме напишем простой плагин на jQuery(1.4.3+). Задача - показывать всплывающее сообщение на странице с эффектом затемнения фона. При нажатии на фон или кнопку "Закрыть", сообщение плавно пропадает.

Посмотреть демонстрационную страницу

Базовая верстка (index.html)

Для проверки плагина потребуется простенькая страница с ссылкой, активирующей всплывающее сообщение. Будет подключена библиотека jquery-latest.js, и файл нашего плагина jmypopup.js.


<!doctype html>
<html>
<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="pl.js"></script>
  <style>
    <!-- здесь будет стилевое оформление -->
  </style>
</head>
<body>
  <a href="#" id="run">Показать сообщение</a>
</body>
</html>

Пишем плагин (jmypopup.js)

За основу возьмем код из урока, написанного Антоном Шевчуком:


(function($) { // Обертка
    var defaults;
    var options;
    $.fn.mypopup = function(params){
        options = $.extend({}, defaults, options, params); 

        // Основной код

        return this;
    };
})(jQuery);  // Обертка

Создается обертка, которая предотвратит нежелаемые конфликты. Внутри назначаются переменные defaults (массив настроек по-умолчанию) и options (массив пользовательских настроек). Далее создается функция, которой и будет наш плагин. Назовем её mypopup.

Рассмотри возможные параметры, передаваемые плагину.

Во-первых, ширину (width) и высоту (height). Это позволит нам гибко управлять размерами окна для каждого из вызывающих объектов и выравнивать по центру окна браузера. В нашем примере для измерения используем числовые значения.

Во-вторых, флаг background, отвечающий за фоновый эффект затемнения/осветления (зависит от предпочтений верстальщика). Стоит отметить, что данный параметр введен с целью оптимизации.

В-третьих, текстовый параметр html, который содержит пользовательских html код, отображаемый во всплывающем окне.

В-четвертых, текст ссылки для закрытия close. Если текста не будет, то и ссылка не создается. Опять же, подобный нюанс, ввдене с целью оптимизации.

Добавим описанные переменные в код, задав значения по умолчанию:


 var defaults = { width:'200', height:'64', background:true, html:'', close:'Закрыть'};

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

Далее при необходимости пользователю показывается определеный блок данных.

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

Объявим в основном коде новую переменную,отвечающую за уникальность каждого всплывающего окна. Это позволит избежать нежелательных эффектов.


// Основной код
// Случайное значение 1-1024 :
var seed = 1 + Math.floor(Math.random()*1024);

Далее в основном коде напишем условие создания фонового слоя, используя функцию .append(). Обязательно спрячем его от пользователя командой .hide():


// Фон:
if (options.background){
            $("body").append('<div id="plup_fade'+seed+'" class="plup_fade"></div>'); 
            $("#plup_fade"+seed).hide();  
        }
// end if

Теперь перейдем к созданию самого сообщения. Добавление происходит аналогично. Блоку устанавливается высота и ширина, приведенные к числовому типу командой parseInt(). К сожалению, мне не пришло в голову более грамотного стилистического оформления для выравнивания сообщения по центру страницы, чем отрицательные отступы. Не стоит забывать о необходимости спрятать созданный блок от пользователя.


// end if
// Добавление слоя сообщения:
$("body").append('<div id="plup_msg'+seed+'" class="plup_msg" style="width:'+parseInt(options.width)+
'px; min-height:'+parseInt(options.height)+'px; height:'+parseInt(options.height)+'px; margin-top: -'
+(parseInt(options.height)/2)+'px; margin-left: -'
+(parseInt(options.width)/2)+'px;"><div class="plup_data"></div></div>');

// Добавление текста, если он есть:

if (options.html)
        {
          $("#plup_msg"+seed+" .plup_data").html(options.html);        
        }
        else
        {

            $("#plup_msg"+seed+" .plup_data").html('<h2><center>Привет</center></h2>');
        }
// end if..else

$("#plup_msg"+seed).hide();

// Добавление ссылки "Закрыть"
if(options.close){
          $("#plup_msg"+seed).append('<div class="plup_close"><a href="#" title="'+options.close+'">'+options.close+'</a></div>');        
        }

Пора научить наши сообщения всплывать при нажатии на указанный объект, а также прятать при нажатии на фон или ссылку "Закрыть". Добавим специй! Прятать и показывать сообщение будем с использованием плавного исчезновения. В этом нам поможет команды .fadeIn() и .fadeOut(). В основном коде допишем:


// Нажатие на объект:
$(this).click(function(){
            $("#plup_fade"+seed).show();
            $("#plup_msg"+seed).fadeIn('slow');
        });

// нажатие на фон или сылку "Закрыть"
$("#plup_msg"+seed+" .plup_close a, #plup_fade"+seed).click(function(){            
            $("#plup_msg"+seed).fadeOut('slow');
            $("#plup_fade"+seed).delay(8000).hide();
        });

Собственно, наш плагин почти готов. Осталось оформить и заставить работать.

Для запуска в нашем примере допишем в конце jmypopup.js код, выполняющийся при загрузке страницы:


$(document).ready(function(){
        $("#run").mypopup({
            background:true, 
            close:'Закрыть', 
            html:'<h2 class="background:">JQuery popup plugin hello</h2><p>Lorem ipsum dolor sit amet</p>'});
});

Стилистическое оформление

Основной проблемой, которую необходимо решить на данном этапе - это растянуть фон-затемнение на всю ширину и высоту экрана. Реализуем задумку через абсолютное позиционирование слоя .plup_fade относительно body. Собственно, это еще одна причина, по которой html код плагина вставляется в конце под основным контентом. Для создания полупрозрачности кроссбраузерными вариантами css параметра opacity. Для капризного ie7 воспользуемся фильтром и хаком, понятным только этому браузеру.


body {
  min-height: 100%;
  height:100%;
  margin:0;
  padding:0;
}

.plup_fade{
  position: absolute;
  top: 0;
  left:0;
  right:0;
  bottom:0;
  background: #000;
  *filter: alpha(opacity=50); /*Ie7 хак*/
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: 0.50;
  z-index:9998;
}

Чтобы выровнить всплывающее сообщение по центру, воспользуемся абсолютным позиционированием относительно body и отрицательными отступами, которые генерируются в плагине.


.plup_msg{
  position:absolute;
  top:50%;
  left:50%; 
  background:#fff;
  z-index:9999;
  border: 1px solid #667;
  overflow:hidden;
}

Наш плагин готов.

Послесловие

У нас получился несложный плагин, работающий в браузерах FF4, Opera 9+, IE7+, Google Chrome, Safari 5.05+. Он далек от идеала и не покушается на таких монстров, как Lightbox2 или Colorbox. Не умеет работать с ajax или подгружать картинки, создавая сложные галереи. Зато в сжатом виде весит всего 0.1kb и не использует графики вообще. Отлично подойдет для дополнительного функционала в административных панелях.

Для отображения и скрытия затемненного фона используется .show() и .hide(), однако можно воспользоваться и командой .fadeTo(). А мне все равно! Больше нравится первый вариант =)

Для создания уникально числа лучше использовать значение времени и даты.

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

Edited April 2, 2012 by Radiocity

Sign In

jQuery: Всплывающие окна для начинающих

Question

Radiocity

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information