Диалоговые окна на jQuery

Некоторое время назад я писал о том, как создать диалоговые окна для замены стандартных диалогов alert, confirm, prompt при помощи библиотеки YUI. Однако, учитывая то, что популярность библиотеки jQuery в разы превышает популярность YUI, то думаю вам больше прийдется по душе следующий плагин (автор Cory S.N. LaViska), который может заменить стандартные, серые, ничем не примечательные, диалоговые окна на более красивые.

В YUI сделать такие окна максимально просто, только потому, что там используются стандартный диалог этой библиотеки – SimpleDialog. С jQuery дело обстоит несколько сложнее, потому что в стандартной поставке таких диалогов нет. В данном плагине такое окно создается самостоятельно, плюс для нормального отображения требуется подключить CSS:

<!-- файлы библиотеки jQuery -->
<script src="/path/to/jquery.js" type="text/javascript"></script>
<script src="/path/to/jquery.ui.draggable.js" type="text/javascript"></script>
<!-- файлы плагина -->
<script src="/path/to/jquery.alerts.js" type="text/javascript"></script>
<link href="/path/to/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />

Файл jquery.ui.draggable.js подключать не обязательно. Он нужен для того, чтобы окошки можно было перетаскивать, хотя я честно говоря не понимаю, кому может понадобиться перетаскивать модальные окна

После подключения плагина нам будут доступны три функции jAlert, jConfirm и jPrompt:

jAlert(message, [title, callback]);
jConfirm(message, [title, callback]);
jPrompt(message, [value, title, callback]);

А вот здесь уже заметно значительное отличие от стандартных окон – это количество параметров, обязательным является только первый. Также обратите внимание, что в отличии от стандартных, наши окна не возвращают никаких значений, а значит их нельзя использовать также, как и стандартные:

<a href="/some/link/here/" onclick="return confirm('текст')"></a>

Здесь, в случае если confirm вернет значение false, то будет отменено действие ссылки по умолчанию, т.е. броузер не перейдет по ссылке. Если же использовать наши окна, то все будет несколько сложнее:

$(function(){
	$('a').click(function(e){
		e.preventDefault();
		var href = $(this).attr('href');
		jConfirm(
				'Подтвердите',
				'Заголовок',
				function(b){
					if (b){
						window.location = href;
					}
				}
			);
	});
});

Дело в том, что jConfirm(), также, как и другие функции плагина передает результат выполнения в callback, который нужно указать третьим параметром. Поэтому в примере я использовал preventDefault(), чтобы отменить значение по умолчанию, а потом в callback-е указываю, что нужно сделать, если пользователь ответил утвердительно.

Смотреть демо Скачать