Стилизованный alert

Для того, чтобы на Вашей странице создать стилизованный alert() нужно создать небольшую функцию, в которой прописать то, что собственно будет происходить

Код Javascript
function Alert(AlertTitle,AlertContent,afterFunction){
	$('<div class="overlay" id="alertOverlay"></div>').appendTo('body');
	$('<div id="alert"><a href="#" id="clouseAlert" onclick="clouseAlert('+afterFunction+'); return false" title="Закрыть" class="clousePopup"></a><div class="h1" id="alertH1">'+AlertTitle+'</div><div id="alertText">'+AlertContent+'</div><div class="otbivka"></div><div class="button" onclick="clouseAlert('+afterFunction+'); return false">OK</div></div>').appendTo('body');
	$("#alertOverlay").fadeIn("slow");
	$("#alert").fadeIn("slow");
	$('#alert').css('margin-top', (-1)*($('#alert').height())+'px');
}
function clouseAlert(afterFunctionClouse){
	$("#alertOverlay").remove();
	$("#alert").remove();
	afterFunctionClouse;
}

А после этого остается только прописать стили к этому скрипту

Код CSS

/*Блок на весь экран*/
#alertOverlay{
	width:100%;
	height:100%;
	position:fixed;
	left:0px;
	top:0px;
	z-index:55;
	background:#333;
	display:none;
}
/*Сам блок с текстом и ссылками*/
#alert{
	width:396px;
	padding:29px 43px;
	background:#fff;
	position:fixed;
	left:50%;
	margin-left:-241px;
	top:50%;
	z-index:56;
}
/*Заголовок блока*/
#alertH1{
	padding-bottom:13px;
}
/*Текст, который будет под заголовком*/
#alertText{
	color:#969199;
	font-size:12px;
	font-family: Arial;
}
/*Вид ссылок в тексте*/
#alertText a{
	color:#333;
}
/*Вид ссылок в тексте при наведении*/
#alertText a:hover{
	text-decoration:none;
	color:#ed1e79;
}
#alert div.otbivka{
	height:71px;
	background:url(bg.gif) repeat-x bottom;
}
/*Кнопка ОК*/
#alert div.button{
	width:112px;
	margin:29px auto 0 auto;
	height:35px;
	line-height:35px;
	text-align:center;
	color:#fff;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	cursor:pointer;
	text-transform:uppercase;
	font-size:18px;
    background: #f0f0f0; /* Old browsers */
    background: -moz-linear-gradient(top, #f0f0f0 0%, #c8d0d2 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #f0f0f0 0%,#c8d0d2 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #f0f0f0 0%,#c8d0d2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#c8d0d2',GradientType=0 ); /* IE6-9 */
}
#alert div.button:hover{
    background: #c8d0d2; /* Old browsers */
    background: -moz-linear-gradient(top,  #c8d0d2 0%, #f0f0f0 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #c8d0d2 0%,#f0f0f0 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #c8d0d2 0%,#f0f0f0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8d0d2', endColorstr='#f0f0f0',GradientType=0 ); /* IE6-9 */
    -webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 1);
    -moz-box-shadow:    0px 0px 10px 0px rgba(50, 50, 50, 1);
    box-shadow:         0px 0px 10px 0px rgba(50, 50, 50, 1);
}

Ну а теперь вызываем наш новый alert()

При этом ссылку следует указывать спецсимволами - т.е. &#60;a href=&#34;&#34;&#62;

Код HTML
<div onclick="Alert('Заголовок alert()','Текст внутри alert() и &#60;a href=&#34;&#34;&#62;ссылка внутри текста&#60;/a&#62;',''); return false;">ПРИВЕТ!</div>

Если Вам надо вставить

Пример использования

Нажмите на слово ПРИВЕТ!

Вверх