Иногда на сайте необходимо использовать всплывающие диалоговые окна, просто информативные или подтверждающие или отклюняющие какие-либо действия и даже выполнение определенных действий. В большинтве случаев для такие целей подойдет плагин из библиотеки jQuery UI - Dialog. Он довольно прост в использовании и имеет множество настроек, обработчикой событий и действий. Я лишь покажу как подключить Dialog и основные манипуляции с ним. Остальное читайте на официальном сайте.
Для начала необходимо создать контейнет который будет содержать заголовок диалога и его содержимое.
<div id="messageDialog" title="Message">Текст или html который будет отобразаться в диалоговом окне</div>
$('#dialog').dialog({
autoOpen: false,
height: 500,
width: 600,
modal: true,
resizable: false,
open: function() {
//какие-либо действия при открытии окна
},
close: function() {
//какие-либо действия при закрытии окна
},
buttons: {
"Save": function() {
//действия при нажатии кнопки Save
$(this).dialog('close');
},
"Close": {
click: function() {
//действия при нажатии кнопки Close
$(this).dialog('close');
},
id: 'button-close',
text: 'Close'
}
}
});
autoOpen: true или false, отображать ли диалоговое окно при загрузке страницы, обычно ставим false, т. к. нам надо открывать при определенном действии height, width: думаю тут все понятно, высота или ширина в пикселях modal: модельное окно или нет, т е можно ли не закрывая его выполнять какие-либо дейтсвия на страницы, обычно true resizable: возможно ли изменять размеры окна open: функция которая срабатывает при открытии окна close: функция которая срабатывает при закрытии окна buttons: кнопки, Save, Close имена и по умолчанию отображаемый текст, можно писать по русски, я специально сделал 2 варианта описания кнопок, первый (Save), обычный вариант указывает надпись кнопки и функцию при нажатии на кнопку, второй (Close) описывает действия и свойства, text - текст кнопки, т е имя может быть любым; click - функция при нажатии на кнопку, id - ид кнопки.
Существует еще много свойств и обработчиков, которые можно найти на официальном сайте. Еще хочу отменить что все свойства описывать не обязательно, только те которые мы хотим задать явно.
Ну и теперь нам осталось написать обработчик на ссылку, кнопку или что-то еще при нажатии на который появится наше диалоговое окно.
$('#show-message-button').click(function() {
var html = 'Другой текст во всплывающем окне';
$('#dialog').html(html).dialog('open');
return false;
});
Хочу отметить еще то, что мы можем менять сожержимое нашего блока, если текст сообщений нужен разные при нажатии на разные кнопки, поэтому в коде выше перед вызовом окна мы меняем его html. Если это делать не надо, это вызов можно опустить. Результат ниже на рисунке, стили окна можно подредактирововать самому, или скачать на оффициальном сайте, там много разных тем.
