Dialog - диалоговые окна, является одним из плагинов-виджетов от библиотеки JQuery UI. Часто меня просили рассказать, как же оно делается, но все как-то руки не доходили. Сам плагин загрузит вашу страницу на 203 kB.
Что ж, приступим.
Для начала необходимо подключить саму библиотеку и основной стиль (html верх или низ)
<script src="http://forumstatic.ru/files/0010/b1/9a/25563.js"></script> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
Далее формируем само диалоговое окно (куда угодно):
<div id="dialog" title="Название окна диалога"> <p>Текст внутри окна</p> </div>
Далее добавляем кнопку открытия диалога (туда, где нужна кнопка, в том числе и дополнительным пунктом в форумное меню: Настройки/Дополнительные пункты меню/ Х = "код кнопки").
Обычная кнопка:
<button id="opener">Открыть окно</button>
Кнопка картинкой:
<img src="URL_картинки" id="opener" style="cursor: pointer;">
В дальнейшем есть два возможных вида открытого диалога: обычный и модальный. Второй предполагает добавления затемнения на страницу, что неминуемо привлечет внимание форумчан именно к диалоговому окну. Модальное окно запрещает доступ к элементам форума, так что рассчитывайте на это.
Обычный (html верх или низ):
<script>
$.fx.speeds._default = 1000;
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: "blind",
hide: "blind"
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
return false;
});
});
</script>Модальный (html верх или низ):
<script>
$.fx.speeds._default = 1000;
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: "blind",
hide: "blind",
modal: true
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
return false;
});
});
</script>А теперь стилизуем наше окошко (html верх или окна стиля):
<style>
/* Определяет стиль заголовка окна. Советую использовать только background и border, если нужно убрать границы*/
.ui-widget-header {
background: url(ссылка_на_картинку) bottom center no-repeat;
}/* Выравнивание названия диалогового окна */
.ui-dialog-titlebar {
padding: .7em 1em;
}/* Стиль контента внутри окна, любые в принципе параметры */
.ui-dialog .ui-dialog-content {
background: transparent url(ссылка_на_картинку) bottom left no-repeat;
padding: .7em 1em;}
/* Стиль контента внутри окна, любые в принципе параметры */
.ui-dialog .ui-dialog-content {
background: transparent url(ссылка_на_картинку) bottom left no-repeat;
padding: .7em 1em;}
/* Стиль всего окна, советую bsckground и border */
.ui-widget {
background: #999;}
</style>
NB
Про создание нескольких кнопок
Поскольку кнопки привязаны к конкретному окну, добавление второго окна существенно увеличивает код. Создавая новое окно, меняйте у самого окошка id="dialog" на, допустим, id="dialog_2", а у кнопки - id="opener" на id="opener_2", а затем добавляйте
<script>
$.fx.speeds._default = 1000;
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: "blind",
hide: "blind",
modal: true
});$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
return false;
});
});СЮДА
</script>
$(function() {
$( "#dialog_2" ).dialog({
autoOpen: false,
show: "blind",
hide: "blind",
modal: true
});$( "#opener_2" ).click(function() {
$( "#dialog_2" ).dialog( "open" );
return false;
});
});
Удачных начинаний.
Теги: JQuery, окна, модальные, перетаскиваемые, изменяемый размер
