Привожу пример довольно простого рабочего «допила», который позволяет заменить стандартный 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. Там еще есть круглая кнопочка с крестиком, чтобы посетитель сайта не терялся и жамкал для закрытия.
На этом всё. Подписывайтесь, ставьте лайк, чаще улыбайтесь и делитесь ссылками с друзьями.
С вами был Доктор Лексиум.
Хорошего утра, дня, вечера, ночи (нужное подчеркнуть).
Я в коде везде заменил alert на confirm, и у меня кастомизация стандартного окна confirm сработала. Но у него нет кнопок согласия и отмены. Какой код туда нужно добавить для кнопок?
То же самое можно сделать для окна confirm? Там нужна лишь кнопка подтверждения, которая возвращает true. А заменить alert на confirm я догадался. В качестве же кнопки отмены я, например, мог бы приспособить крестик закрытия окна, вот этот contact-remove-sign. Его легко переделать в прямоугольную кнопку, написать на нём «Отмена» и передвинуть куда надо.
Скрипт то что надо. Другие решения, что я рассматривал, все какие-то замороченные. Вот только кнопочки true не хватает.
Интересный вопрос. Плохо что увидел его лишь спустя неделю.
С ответом нужно подумать. Честно говоря, обычно подобные вещи делаю с помощью самописных модальных окон и нескольких строчек кода. Так проще.