Popup - всплывающее окно

Понедельник, 16 Май 2011

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

Для реализации такого всплывающего окна PopUp, были написаны два простых скрипта под две javascript библиотеки: mootools и jquery. Версия mootools - 1.3.2. Версия jQuery - 1.5.2.

В этой статье опишу принцип работы скрипта и необходимых свойств CSS, манипулируя значениями которых, достигаются необходимые эффекты PopUp всплывающего окна.

И так, как обычно логика. Вызов PopUp обычно осуществляется после какихто действий пользователя, это может быть и просто загрузка страницы в браузер пользователя, и клик по ссылке или какому то объекту на странице. Но в данном примере остановимся на последнем варианте, то есть вызов PopUp окна, быдет осуществлятся после клика мыши по ссылке - событие click.

Для этого присваиваем ссылке атрибут ID, и по нему присваиваем этой ссылке событие click, по которому будет вызвана функция отображающая всплывающее PopUp окно.

С этим моментом думаю все понятно, теперь о том что будет отображатся и каким образом. Ну вопервых контент который должен отображатся во всплывающем PopUp окне не должен содержатся в самом javascript коде скрипта, так как это создает кучу проблем при использовании для отображении различного контента.

Также передавать HTML как параметр в функцию скрипта, тоже не очень удобно. Поэтому было принято решение передавать в параметре функции сам объект DOM который содержит нужный для отображения в PopUp окне контент. Также в функцию передается обьект которому будет назначено событие click по которому вызывается функция отображения PopUp окна.

Выглядит это следующим образом:

 
//This Mootools
<script type="text/javascript" src="js/mootools-core-1.3.2-full-nocompat-yc.js"></script>
<script type="text/javascript" src="js/popup.js"></script>
<script type="text/javascript">
 window.addEvent('domready', function(){
 PopUp($('obj'), $('trigg'));
 });
</script>
 
//This jQuery
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/popup.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
 PopUp($('#obj'), $('#trigg'));
 });
</script>

А сам HTML для данного примера будет выглядеть так:

 
...
<body>
 <div class="wrapper">
 <a id="trigg" href="javascript:void(0);">Показать POP-UP окно</a>
 
 <!-- Из obj будет извлечен HTML и помещен в POP-UP -->
 <div id="obj"><div class="sample"><p>Произвольный HTML код...</p></div></div>
 <!-- X Из obj будет извлечен HTML и помещен в POP-UP -->
 
 </div>
</body>
...

Теперь описание самого скрипта и его функций. Описание будет для примера скрипта POP-UP на mootools, т.к оба варианта отличаются друг от друга, лишь синтаксисом характерным для этих библиотек.

И так при событии загрузки web страницы - событии domready, вызывается функция PopUp(obj,trig);, которой передаются в качестве входных параметров: ссылки на обьект содержащий HTML код для отображения в popup окне, и ссылку на объект DOM которому будет присвоено событие клик click.

Код скрипта POP-UP Mootools:

 
function PopUp(obj,trig){
 var html = obj.get('html');
 obj.destroy();
 var body = $$('body')[0];
 
 var HTML="<div id='popup'><span id='cancel'></span>"+html+"</div></div>";
 
 var win = new Element('div', {id:'win', html:HTML});
 win.inject(body);
 
 function showWin(){ 
 $('win').setStyles({display: 'block'});
 $('popup').setStyles({
 display:'block', 
 opacity:0, 
 top: window.getSize().y/2-$('popup').getSize().y/2+'px', 
 left: window.getSize().x/2-$('popup').getSize().x/2+'px'
 });
 $('popup').setStyle('opacity', 1); 
 }
 
 if($(trig)){
 $(trig).addEvent('click',function(){
 showWin();
 });
 }
 
 if($('cancel')){
 $('cancel').addEvent('click', function(){
 $('win').setStyle('display', 'none');
 });
 }
 
}

И так что же делает эта функция PopUp: послее ее вызова создается переменная var html;, которая будет содержать HTML код, переданного DOM объекта из первого входного параметра - obj. Получив нужный HTML для отображения в popup окне, удаляем объект DOM из документа, используя функцию destroy.

Далее создаеться переменная body, которая будет содержать ссылку на объект документа BODY, именно в BODY, будет помещен контейнер PopUp окна.

После этого создается переменная HTML - которая содержит сформированную HTML разметку popup окна, с помещенным в него содержимым из переменной html.

Следующим момент - как говорилось в начале статьи, PopUp - обычно используется для привлечения большего внимания пользователя, или же большей его концентрации на содержимом в PopUp окне. Поэтому для большей эффективности целесообразно затемнить остальной контент web страницы, для этого создается новый HTML элемент с идентификатором win, а также с помещенным в него HTML кодом popup окна. После чего этот объект помещается в BODY. Этот обьект будет перекрывать всю страницу а фоном будет установлен полупрозрачный PNG.

 
var win = new Element('div', {id:'win', html:HTML});
win.inject(body);

Далее по коду идет функция showWin(), но для начала опишу часть кода которая вызывает эту функцию, а также скрывает PopUp.

Код вызова PopUp и его сокрытие:

 
 if($(trig)){
 $(trig).addEvent('click',function(){
 showWin();
 });
 }
 
 if($('cancel')){
 $('cancel').addEvent('click', function(){
 $('win').setStyle('display', 'none');
 });
 }

И так сначало присваиваем событие клика по элементу из второго входного параметра функции, и при этом событии вызываем функцию которая отображает popup, а затем присваиваем событие клика по элементу с $('cancel'), который находится в контейнере popup окна, и при этом событии присваиваем CSS свойство display:none; элементу $('win'), тем самым скрывая PopUp.

Теперь описание функции showWin(), которая отображает контейнер $('win') и тем самым показывает Pop-UP окно.

 
function showWin(){ 
 $('win').setStyles({display: 'block'});
 $('popup').setStyles({
 display:'block', 
 opacity:0, 
 top: window.getSize().y/2-$('popup').getSize().y/2+'px', 
 left: window.getSize().x/2-$('popup').getSize().x/2+'px'
 });
 $('popup').setStyle('opacity', 1); 
}

И так, после установки display: block; контейнеру $('win');, затемняется весь контент на странице, а после этого, контейнеру $('popup'), устанавливаются определенные CSS свойства. Во первыых это display: block;, а затем сразу же полная прозрачность opacity:0, и уже после этого производится расчет размеров Pop-UP окна, для его правильного позиционирования по центру окна браузера. Это очень важный момент, потому что без display: block;, функция getSize() не может правильно вычислить размеры элемента.

После установки свойств top и left, вновь присваиваем значение opacity равное единице. Что касается самих расчетов то здесь все очень просто: вычисляем ширину окна браузера, делим ее пополам, и вычитаем от этого половину ширины самого Pop-UP окна, точно так-же вычисляем позицию top. Благодаря этому popup окно всегда отображается по центру окна браузера, вне зависимости от размеров как окна браузера так и самого блока $('popup').

Теперь описание CSS свойств.

CSS:

 
#win{
 position:absolute; 
 z-index:2000; 
 top:0;
 left:0;
 background:url(img/win.png); 
 display:none;
 height:100%;
 width:100%;
}
#popup{
 padding:0; 
 background:#FFFFFF; 
 position:fixed; 
 width:400px;
 height:300px;
 text-align:center;
 z-index:3000; 
}
#cancel{
 display:block; 
 float:right; 
 width:15px; 
 height:15px; 
 background:url(img/close.gif) no-repeat; 
 cursor:pointer;
 position:absolute;
 top:4px;
 right:4px;
}
#obj{display:none;}
.sample{padding:20px;}

Для #win - обязательно ширину и высоту в 100%, а также абсолютное позиционирование с top:0 и left:0, а также display:none.

Для #popup - обязательно position:fixed, если кто-то еще осуществляет поддержку IE6 в своих проектах, в этой статье вы найдете способ решения проблемы с position:fixed - Position:fixed

Для #obj - скрываем

На этом все, остальное на ваш вкус :)

Посмотреть пример для Mootools: PopUp Mootools.

Скачать пример для Mootools: PopUp Mootools.

Посмотреть пример для jQuery: PopUp Jquery.

Скачать пример для jQuery: PopUp Jqueryr.

PS. Читайте последние записи RSS Подписка на RSS

Метки: