Для того, чтобы на Вашей странице создать стилизованный 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()
При этом ссылку следует указывать спецсимволами - т.е. <a href="">
Код HTML
<div onclick="Alert('Заголовок alert()','Текст внутри alert() и <a href="">ссылка внутри текста</a>',''); return false;">ПРИВЕТ!</div>
Если Вам надо вставить
Пример использования
Нажмите на слово ПРИВЕТ!