04.05.2012 00:00:27: Переработал дизайн (стало лучше или хуже?), пофиксил несколько неприятных багов.
Если нужен исходник плагина для фиксации навигации при скроллинге оставьте свой контакт.
Небольшое уточнение: весь код проверяю в IE начиная с версии 7 и в Chrome (на данный момент актуальна 18 версия), буду признателен за информацию об ошибках в других браузерах - пишите сообщения на соответствующих страницах.

Плагины для jQuery: Сообщения

Что тут есть?

Данный плагин сделан для замены стандартных alert и confirm.
Основные возможности:

  • В тексте сообщения можно использовать HTML.
  • Для большого текста будет включен скроллинг.
  • Можно создать любой набор кнопок.
  • Можно задать время автоскрытия сообщения.
  • Можно задать обработчик закрытия сообщения по-умолчанию.
  • Изменяемый стиль сообщения.
  • Показ сообщений и запросов без блокировки всего окна.

Попробовать прямо сейчас

Текст Время показа
Стиль
HTML элемент
HTML элемент для вывода в сообщении

при клике на этом элементе он не исчезнет так как обработчик
onmouseup запрещает прохождение события до DmNotify
Кнопки
Событие onDefault

Как использовать

Пример вызова:

// Полный вариант:
$.DmNotify({
	// Текст сообщения
	html:		'Текст',
	// Кнопки, можно не указывать
	keys:		{
					// Коллекция кнопок - объект, у которого
					// имя свойства - текст на кнопке
					'Имя кнопки':
					// значение этого свойства - обработчик нажатия
					function()
					{
						alert('Обработчик кнопки');
					}
				}, 
	// Время показа сообщения, можно не указывать:
	// = null - время показа по-умолчанию (5 сек)
	// = -1   - нет автоскрытия
	// >0     - время показа в миллисекундах
	timeout:	4000,
	// Стиль панели сообщения, можно не указывать.
	// Если стиль не указан, то у панели прописывается CSS класс 'notify',
	// если стиль указан, то у панели CSS класс будет прописан так: 'notify указанный_стиль'
	css:		'warning',
	// Обработчик события закрытия сообщения без нажатия на кнопку, если нажали на кнопку,
	// то событие не вызовится, так же обработчик не будет вызван, 
	// если сообщение вытесняется следующим сообщением
	ondefault:	function()
				{
					alert('ondefault');
				}
});
// Сокращенный вариант:
$.DmNotify('Текст');

Настройка отображения

Такая структура создается для показа сообщений:

<div class="notify" style="opacity: 1; top: -100000px; ">
	<div class="content">
		<div class="contentbg">
			<div class="text"><!--Тут будет вставлен HTML--></div>
			<div class="buttons" style="display: block; ">
				<span class="hint"><!--
					Текст, установленный через $.DmNotify.hint(...) будет отображен здесь
				--></span>
				<span class="ttl" title="Сообщение будет скрыто через указанное время"></span>
				<!--Тут будут показаны кнопки--><button>Текст</button>
			</div>
		</div>
	</div>
</div>

Текущий CSS для сообщений:

/* Основной элемент, он имеет абсолютное позиционирование */
.notify
{
	background:		transparent url(../img/nbgr.png) no-repeat right bottom;
	padding:		0px 8px 0px 0px;
	margin-top:		-10px;
	left:			25%;
	width:			50%;
	position:		fixed;
	z-index:			200;
}
/* В этом элементе располагатся элемент с содержимым */
.notify .contentbg
{
	background:		transparent url(../img/nbg.png) left bottom;
}
/* В этом элементе располагаются текст и кнопки */
.notify .content
{
	background:		transparent url(../img/nbgl.png) no-repeat left bottom;
	padding:		0px 0px 8px 8px;
}
/* В этом элементе располагается текст */
.notify .text
{
	padding:		18px 8px 8px 8px;
	font-size:		13pt;
	font-weight:	bold;
	text-align:		center;
}
/* В этом элементе располагаются кнопки */
.notify .buttons
{
	background:		transparent url(../img/bg7-5.png) no-repeat center top;
	vertical-align:	middle;
	text-align:		right;
	padding:		4px;
}
/* В этом элементе располагается счетчик времени до закрытия сообщения */
.notify .ttl
{
	padding:		0px;
	font-weight:	bold;
	display:		inline-block;
	font-size:		10pt;
	margin:			-2px 8px -2px 0px;
}
/* Стиль кнопок сообщения */
.notify BUTTON
{
	font-weight:	bold;
	min-width:		80px;
	cursor:			pointer;
	margin-left:	2px;
	padding:		1px;
	height:			24px;
}

/* Расширенные стили сообщения: красный и синий */
.notify.red .contentbg	{ background-image: url(../img/nbg-r.png); }
.notify.blue .contentbg	{ background-image: url(../img/nbg-b.png); }

Как зафиксировать сообщение вверху окна.

Самое простое: style="position: fixed", но это не работает в IE<7 (на них тратить время не хочу, поэтому использую fixed), но можно применить следующий подход:

<html>
	<head>
		<style type="text/css">
			BODY
			{
				width:		100%;
				height:		100%;
				overflow:	hidden; /* У BODY убираем скроллинг */
				padding:	0px;
				margin:		0px;
			}
			#content
			{
				width:		100%;
				height:		100%;
				position:	relative;
				overflow:	auto; /* У элемента с основным содержимым включаем скроллинг */
			}
			.notify
			{
				position:	absolute;
				z-index:		200;
			}
		</style>
	</head>
	<body>
		<!-- На это место будет добавлен тэг для DmNotify и он сколироваться не будет -->
		<div id="content">
			Тут прокручиваемая часть страницы
		</div>
	</body>
</html>

Идея простая - отключаем скроллинг у BODY, таким образом все элементы будут зафиксированы на месте, основное содержимое, которое должно скроллироваться, помещаем в отдельный элемент и у этого элемента включаем скроллинг.
Проверено в браузерах: IE7, Safari 3.01 (Win), FireFox 2, FireFox 3, Google Chrome

Версии

Версия Описание
1.0
16.02.2009
Первая публикация.
1.1
16.09.2009
Добавлено событие onDefault, оптимизировано создание кнопок, добавлен скроллинг большого содержимого.
1.2
24.10.2009
Добавлен вывод времени до закрытия сообщения, и еще - если мышь на сообщении и подошло время закрытия, то сообщение не скрывается.
1.3
04.02.2010
Добавлена возможность помимо текста передавать любой jQuery объект или HTML элемент для показа в DmNotify.
1.4
13.07.2010
Счетчик до закрытия сообщения, пока мышь на сообщении, не считает время до закрытия.
1.5
12.09.2011
Добавлен метод $.DmNotify.hint(...) для отображения дополнительных сообщений, введен элемент contentbg для облегчения накладывания стилей, проверена совместимость с jQuery 1.6.4.

Небольшое дополнение

Иногда мне присылают сообщения о том, что этот плагин не работает в IE6, однако вот:

Работа плагина в IE6
Если у вас он таки не работает - пришлите мне кусок HTML и JScript, то бы разбираться предметно.