Замена стандартного alert в javascript на кастомный

Привожу пример довольно простого рабочего «допила», который позволяет заменить стандартный javascript’овый alert на собственные модальные окна.

Дизайн и анимацию окошек можно изменить на свой вкус.

JS

jQuery(document).ready(function($) {
	window.realAlert=window.alert
	window.alert=function(s){
		customAlert(s)
	}

	function customAlert(s) {
		if($('#customalert')[0]) {
			if($('#customalert').hasClass('on')) {
				$('#customalert').find('.alerttext').html(s);
			}else{
				$('#customalert').addClass('on').find('.alerttext').html(s);
			}
		}else{
			$('body').append('<div id="customalert" class="on"><span class="alerttext">' + s + '</span><span id="contact-remove-sign"></span></div>');
		}
		$('#customalert').fadeIn(1500);
	}
	
	$(document).on('click', '#customalert', function(){
		$(this).removeClass('on').fadeOut();
	});
	
});

CSS

#customalert{
   display:none;
   width:280px;
   height:auto;
   padding:15px 20px 10px;
   position:fixed;
   top:50%;
   left:50%;
   margin-left:-159px;
   margin-top:-19px;
   border:#999 1px solid;
   background:#fff;
   z-index:9999;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   box-shadow: 0 0 10px rgba(0,0,0,0.5);
   font-size:20px;
}

#contact-remove-sign{
   display: inline-block;
   float:right;
   position: relative;
   cursor: pointer;
   overflow: hidden;
   height: 21px;
   width: 21px;
   right: -15px;
   top: -10px;
   background: #d22c10;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%;
   color: #fff;
   font-stretch: ultra-expanded;
   margin-left:10px;
   margin-bottom:5px;
}

#contact-remove-sign::before, 
#contact-remove-sign::after {
    position: absolute;
    left: 9px;
    margin-top: 4px;
    content: ' ';
    height: 12px;
    width: 3px;
    background-color: #fff;
}

#contact-remove-sign::before{transform: rotate(45deg);}
#contact-remove-sign::after{transform: rotate(-45deg);}

Работает очень просто:

• скрипт создает скрытый блок в конце страницы (если его еще нет),
• перехватывает alert и выводит его содержимое в этот скрытый блок,
• делает блок видимым,
• при клике по блоку, снова его скрывает (до следующего alert’а).

Дизайн блока задаем с помощью CSS. Там еще есть круглая кнопочка с крестиком, чтобы посетитель сайта не терялся и жамкал для закрытия.

На этом всё. Подписывайтесь, ставьте лайк, чаще улыбайтесь и делитесь ссылками с друзьями.

С вами был Доктор Лексиум.

Хорошего утра, дня, вечера, ночи (нужное подчеркнуть).