окошки с затемнением на jquery
01/05/09 в 23:05 | просто прочесть =)Доброе всем время суток. Сегодня в этот светлый день (а сегодня 1 мая и действительно уже рассвело, да и у автора этого плагина ДР =) ) показать как быстро и без особых заморочек сделать себе приятно, поставив такую милую и очень удобную штучку, как окошки с затемнением фона на jQuery.
Итак, чем-же удобны всплывающие окна? Ответ прост. Это привлекает внимание, это стильно, модно и просто в исполнении. Эти появляющиеся окна по сути похожи на то как работает lightbox, т.е. тоже плавное затемнение фона и появление окна посередине экрана.
Ну и от теории к практике.
Для начала нам нужны следующие файлы: jquery.js, jwin.css и jwin.js
И код который вставляется в HEAD файла.
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/jwin.js"></script>
<link href="./js/jwin.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var cont;
cont = 'Текст сообщения';
function testWindow(){
var w = $.jWin.create({alwaysCentered:true,autoShow:false,
modal:true,overlayOpacity:0.8,overlayColor:'#000',
title: '<strong>Заголовок</strong>',handleEscape:true
});
w.setContent(cont);
w.show();
}
</script>
Ссылки формируются как обычно, но плюс onclick=»testWindow();»
Естественно никто не мешает усовершенствовать интерефейс. Это и так переделка окошек от http://maxantonov.name за что ему огромнейшее спасибо.
UPD: было обновление у на сайте у Макса забирайте новую версию, умеет заберать контент через $.get и вставит в .body окна из http:// и из ./file.html
4 комментария »
Подписаться на комментарии по RSS. URI трекбека
[...] у Дурацкого Девелопера пример окошек которые вылетают как в lightbox картинки. [...]
Уведомление от Те самые окошки с затемнением - Блог Web-разработчика — 1 мая 2009 #
Можно, как это делает сам лайтбокс — вешать обработчик на все ссылки с определенным rel — хотя, думаю при этом. придется ждать полной загрузки.
Коммент от Сергей М. — 2 мая 2009 #
Ну тут это сделано для нескольких поп-апов. Тоесть в принципе можно расширить функционал, но надо ли оно? Открывать все ссылки попапами… мне кажется ненадо. Например на этим плагином сделан поп-ап на реклпме после постов.
Коммент от Eugene Che — 2 мая 2009 #
Спасибо за пеар плагина. Он прост и понятен, для того мне и был нужен.
Что самое интересное — этот пост был сделан в мой день рождения :)
Коммент от Max Antonov — 5 мая 2009 #