окошки с затемнением на 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