Всплывающее окно. Чужой плагин для jQuery
версия для печати
По работе потребовалось прикрутить к сайту несколько popup-окошек. Чтоб красиво всплывали и корректно работали. Сначала накатал свой код, без эффектов. Однако ж не по "феншую" было. Нашел подходящий jQ-плагин, разобрался, как использовать и теперь пишу, чтоб в следующий раз время не терять впустую. Имя плагина - custombox. Страница на оф.сайте jQuery, форк на Гитхабе.
На данный момент есть версия 1.1.3 и поддержка разработчика. На всякий случай, копия текущей версии. Онлайн-примеров у плагина нет, demo идет в комплекте. В менюшке демки можно посмотреть эффекты всплытия, а сама страница и есть мануал по использованию. Все параметры переписывать не буду, отмечу главное для меня. Подключение:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="src/jquery.custombox.js""></script> <link rel="stylesheet" href="src/jquery.custombox.css"">
Вызов:
<script>
$(function () {
$('#element').on('click', function (e) {
$.fn.custombox(this);
e.preventDefault(); //для сброса нативного события тега
});
});
</script>
Пример использования: после загрузки страницы выдать предложение о волонтерстве в всплывающем окне. Юзер должен либо принять его, либо отказаться.
<div id='recruit' class='popup-window'>
<h3>Стань волонтером site.com</h3>
<input id='rct-yes' type='button' value='Да'>
<input id='rct-no' type='button' value='Спасибо, я еще подумаю'>
<br>
<label><input id='rct-leaveme' type='checkbox'> Больше не показывать это окно</label>
</div>
<script>
//Через 3сек после загрузки страницы выдать popup-окно
setTimeout(function() {
$.fn.custombox({
url:'#recruit',
effect: 'blur',
overlayClose:false,
complete: recruitHandlers,
});
}, 3000);
/**
* Вешаем обработчики только после того, как плагин отработал и показал окно. Плагин переносит
* часть DOM, и при этом слетают обработчики, назначенные динамически. Другие решения:
* использовать $().live(), но будет дольше. Прописывать прям в параметрах input-ов - некошерно.
*/
function recruitHandlers() {
//Волонтер согласен
$('#rct-yes').click(function() {
document.location.href = "/recruit"
});
//Прячем предложение о волонтерстве
$('#rct-no').click(function() {
$.fn.custombox('close'); //закрываем окно через вызов плагина
...
});
}
</script>
Пример взят не "от фонаря", в нем есть несколько показательных моментов:
- опущен первый параметр. Т.к. popup-событие происходит не по действию юзера на странице, нечего передать в качестве this. Реакция на клик описана в demo-примерах custombox-а;
- в параметр url можно передать URL, класс или id тега;
- сброшенный флаг overlayClose не позволит закрыть окно щелчком в любом месте. Т.о. юзеру придется выбрать одну из двух кнопок;
- самое важное описано в комментарии (с21-23). По замыслу примера на кнопки вешаются js-обработчики. До подключения плагина они работали, а тут вдруг послетали. Я думал, это баг custombox, но потом увидел в отладчике, что html-код перемещается при работе плагина;
- для всплытия я выбрал эффект размытия (blur). Остальные варианты можно посмотреть в demo плагина;
Еще один пример, со стилями, выпиленными из демки. Здесь скрипт уже не интересен, важен перенос стилей (как сказано выше, статья для того, чтоб не тратить время на поиски). Как это выглядит.
/* Стили для popup-окошек, обслуживаемых плагином jquery.custombox.js */
.popup-window {
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
outline: 0 none;
}
.popup-header {
border-bottom: 1px solid #e5e5e5;
padding: 15px;
}
.popup-header h4 {font-size:120%;}
.popup-body { padding: 20px; }
button.popup-close {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 0 none;
cursor: pointer;
padding: 0;
color: #000;
float: right;
font-size: 21px;
font-weight: 700;
line-height: 1;
opacity: 0.2;
text-shadow: 0 1px 0 #fff;
}
<div id='pp-auth' class="popup-window" style='display:none;'>
<div class="popup-header">
<button type="button" class="popup-close" onclick="$.fn.custombox('close');">×</button>
<h4>Авторизуйтесь</h4>
</div>
<div class="popup-body">
<p>Для выполнения действия вы должны быть <a href='/user/login'
onclick="$.fn.custombox('close')">авторизованы.</a></p>
</div>
</div>
<script>
$(function(){
/*
* Проверка авторизованности юзера перед отправкой формы
* Чтоб прицепить форме обработчик, задай ей класс 'js-checkauth'
*/
$('form.js-checkauth').submit(function(){
var form = this;
//Проверяем авторизованность юзера. В случае ошибок ответа все равно отправляем форму,
//сервер тоже проводит проверку.
$.ajax({
type:'GET',
url: '/cabinet/isGuest',
complete: function(data, status){
if(status == 'success' && data.responseText == '1') {
$.fn.custombox({url:'#pp-auth', effect: 'blur',});
} else {
//обработчик снимаем, иначе получится бесконечный цикл %)
$(form).unbind('submit').submit();
}
}
});
return false;//не даем сразу отправить форму. Будем ждать результат ajax-запроса.
});
});
</script>
Сжатие. У автора (и в моем архиве) нет сжатой версии плагина. Для этого можно использовать, например, сервис Google. После сжатия плагин весит в 3 раза меньше, ~11кБ.
[1oo%, EoF]Понравилась статья? Расскажите о ней друзьям:
