Как изменить javascript alert

ГлавнаяJava скрипты → Алерт

Здесь я покажу, как можно изменить, и сделать более красивее системное сообщение - javascript alert.

alert window - это встроенное во всех браузерах сообщение, которое выводится на экран в модальном окне, где при этом у конечного пользователя отсутствует возможность производить какие-либо операции на станице в этом браузере (происходит блокировка, как и у всех модальных окон), пока он не закроет это сообщение, или не нажмёт "Ок".

Изменить параметры для alert window не так уж и легко, здесь по крайней мере необходимо иметь хорошие познания в javascript.

В моём примере мы же изменим внешний вид javascript alert с помощью дополнения стилевых значений, и сообщение "Алерт" у нас примет уже не стандартный вид, как он идёт изначально, а тот, какой мы захоит сами.

И в этом примере, по сравнению когда внедряют дополнительные коды в javascript, наше модальное окно "Алерт", будет выводиться без проблем во всех основных браузерах.

Пример javascript alert

Данный пример "javascript alert" прекрасным образом подойдёт для вывода сообщений (ошибок) при регистрации, или авторизации.
И ссылка в примерном сообщение кстати, приведёт вас к наглядному примеру, как это выглядит на самом деле. Попробуйте при регистрации делать ошибки, и увидете эти сообщения.

Как вы сами заметили, - данное модальное окно можно редактировать на своё усмотрение: цвет и фон затемняющего основного окна, размеры, фон, цвет, рамку и тень модального окна, цвет и размер текста и кликабельных ссылок в модальном окне.

Как изменить javascript alert:

Код перед закрытым тегом: head


          <!-- Стилевые значения для Алерт  -->
<style type='text/css'>
#alert_dialog {width:100%;height:100%;position:fixed;top:0;left:0;z-index:1002;}        
#alert_fog {background: url("alert.png") repeat scroll 50% 50% #666666;opacity:0.5;width:100%;height:100%;z-index:1000;}        
#alert_body {width: 310px;min-height: 100px;top:300px;left:50%;background-color:#eeeeee;border-radius:8px;margin-left:-164px;padding:15px;box-shadow:0 1px 3px rgba(0, 0, 0, 0.75);position: absolute;z-index: 1003;}
#alert_body hr{border:0;margin:0;padding:0;height:1px;background:#DDDDDD;}
span.alert_text{display:block;margin:0 0 10px 0;padding-bottom:5px;color:#900000;}
span.alert_text_2{display:block;margin:0 0 10px 0;padding-bottom:5px;color:blue;} 
#alert_button{display:block;padding-top:5px;text-align:right;}
</style>

          <!-- Подключение скрипта для Алерт  -->
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("");
  var alert_text = '';
  var alert_height = '';
 function alert(alert_text) {
  $("#alert_dialog").show();
  $("#alert_text").text(alert_text);
  alert_height = $(document).height();
  $("#alert_fog").css('height', alert_height);    
}
  $("#alert_close").click(function(){
  $("#alert_dialog").hide();
});
});
</script>

Код в теле документа:


<button name="submit">Вызвать сообщение Алерт</button>

Код перед закрытым тегом: body


<?PHP
if (isset ($_POST["submit"])) {
echo  "<div id='alert_dialog' style='display:none;'><div id='alert_fog'></div><div id='alert_body'><span class='alert_text'>Это системное сообщение!</span><span class='alert_text_2'>Здесь ваш первый текст!<br />Это пример текста с <a class='class3' href='../home.php' target='_blank'>С вашей ссылкой</a>!</span><hr /><span id='alert_button'><button id='alert_close'>ОК</button></span></div></div>";
}
?>

Для того, чтобы вызвать "javascript alert" без кнопки и ссылки, то есть при открытие страницы, достаточно заменить код в теле документа на то, что находиться в функции php echo, и последний код перед закрывающимся тегом body, то есть код PHP - удалить полностью. И у вас при открытие страницы сразу будет выскакивать ваше сообщение в модальном окне.

На этом всё, оставляем комментарии, нажимаем на Лайки, и спрашиваем, что не понятно!

Поделись ссылкой с друзьями:

Комментарии к статье