Доктор Лексиум
Главная » Блог » Замена стандартного alert в javascript на кастомный
https://www.lexium.ru/2019/04/zamena-standartnogo-alert-na-kastomnyjj/

Замена стандартного 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. Там еще есть круглая кнопочка с крестиком, чтобы посетитель сайта не терялся и жамкал для закрытия.

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

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

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

Напишите комментарий