Замена стандартного alert на стильный с html содержимым

В коде часто требуется использовать стандартные всплывайки типа alert(). Хотя браузеры и постарались их стилизовать, но внешний вид оставляет желать лучшего. К тому стиль алертов отображается по разному в зависимости от типа браузера и стандартным css его никак не изменить. Как быть в такой ситуации?

Для этого можно написать небольшой скрипт, который автоматом заменит стиль всех стандартных alert-ов на вашем сайте. Таким образом, на всех браузерах всплывайки будут показываться в тон вашего сайта и с общим стилем. Звучит неплохо.

Но и это еще не все! В такие alert-ы можно будет легко вставлять любой html код начиная от ссылок и тегов форматирования, заканчивая картинками с видео фрэймами от YouTube. Из-за чего отпадает надобность в подключении или разработки сложных зачастую перегруженных скриптов модальных окон.

Код js и css имеет минимум строк. За счет стилей вы сможете легко поменять внешний вид alert-ов по своему усмотрению. На одной странице можно использовать бесконечно много вызовов таких всплываек. Делается это так:

$(document).ready(function(){
alert(‘Сообщение’);
});

Для вызова всплываек посложнее я предусмотрел поле заголовка и самого текста:

$(document).ready(function(){
alert(‘<div class=”alertm_h1″>Заголовок</div><div class=”alertm_text”>Текст внутри alert() – допускается использовать html (даже input поля формы) и <a href=”https://blogjquery.ru”>ссылки</a></div>’);
});

И естественно, всплывайки можно назначить на onclick событие:

<div onclick=”alert(‘Моя всплывайка!’); return false;”>Показать сообщение</div>

В скачанном коде вы найдете все эти примеры. Единственным недостатком такого alert-а для меня является отключение обновления страницы до того, пока пользователь не нажмет Ok в такой комбинации: alert(‘Вы будете переадресованы’); window.location = ‘/’; Т.е. в стандартной ситуации, страница бы не переадресовалась, пока мы бы не нажали Ok, а с этим alert-ом, она сразу переадресуется. Но в целом такая вещь нужна только программистом. Поэтому решением может быть обычное переименование function alert() в function alert_msg() и использование наименование последней функции для красивый alert-ов, а обычных – для системных сообщений.