Просмотров: 1 415

jQuery UI открытие dialog при клике на кнопку или любой другой элемент.

Сегодня хочу показать, как можно открывать диалоговое окно (dialog), которое является плагином jQuery UI, при клике на какой-либо элемент страницы.

Посмотреть, что собой представляет это окно (dialog) можно здесь:

http://jqueryui.com/dialog/

Вот код, который можно использовать:

HTML:

<button class="minimal">Minimal</button>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>

Создаем кнопку, по которой будут кликать и внизу содержимое диалогового окна.

jQuery:

$(document).ready ( function(){
 $('#dialog').dialog({autoOpen:false}); //Запрет на открытие окна при загрузке страницы
 $(".minimal").click(function() {
         $('#dialog').dialog('open');//Открываем окно при клике на кнопку.
 });
});

Вот, как это работает: