13.08.2015 Установка Sass 21.04.2015 Смена цвета SVG изображения на странице 21.04.2015 Смена цвета SVG изображения на странице 08.04.2014 JQuery - селектор по тексту без учета регистра 10.04.2013 jQuery редактирование таблиц 13.12.2012 jScrollPane 2 - прокрутка контента вниз (autoReinitialise и scrollToBottom) 12.12.2012 jQuery 1.7 метод on - замена bind, live, delegate 16.03.2012 Мгновенный поиск результатов на JQUERY
#129

Замена стандартного ALERT с помощью JQUERY

Как кастомизировать alert или замена стандартного alert на собственный.

Иногда бывает необходимо изменить дизайн стандартного alert`а в браузере и есть много способов как это можно сделать.

Самый простой способ, на мой взгляд, это создать функцию с именем alert, которая будет принимать необходимые данные и показывать, то окно, которое мы нарисуем.

Демонстрация.

Для данной реализации кроме библиотеки jQuery нам ничего не понадобиться.

Допустим у нас есть следующий код на JS:
  1. $(document).ready(function(){
  2.  
  3. // alert, который при загрузке страницы показывает сообщение,
  4. // а также может быть, что на странице у нас много таких элементов
  5. // и им всем необходимо изменить дизайн.
  6.   alert("Welcome!");
  7.  
  8. // Объявляем переменную с текстом для alert
  9. // А также переменную для высоты документа
  10.   var alert_text = '';
  11.   var alert_height = '';
  12.  
  13. // Далее вводим функцию alert,  которая заменит
  14. // стандартный вывод окон на наш. 
  15. // Получаем текст для окна, а также открываем
  16. // скрытый div с нашим дизайном для alert.
  17.   function alert(alert_text) {
  18. 	$("#alert_dialog").show();
  19. 	$("#alert_text").text(alert_text);
  20.  
  21. // Считаем высоту документа, для того, чтобы у нас туман
  22. // закрывал все пространство документа, а не только какую-то
  23. // его часть, и устанавливаем это значение для alert_fog.
  24.         alert_height = $(document).height();
  25. 	$("#alert_fog").css('height', alert_height);
  26.   }
  27.  
  28. // По нажатию ОК - закрываем alert
  29.   $("#alert_close").click(function(){
  30.        $("#alert_dialog").hide();
  31.    }); 
  32.  
  33.  
  34. });


Следующий html необходимо вставить в тело страницы, после body, он не должен находиться внутри каких-нибудь других div элементов.
  1. <div id="alert_dialog" style="display:none;">
  2.     <div id="alert_fog"></div>
  3.     <div id="alert_body">
  4.          <span id="alert_text"></span>
  5.          <hr>
  6.          <span id="alert_button"><button id="alert_close">ОК</button></span>
  7.     </div>
  8. </div>


Также CSS для нашего контейнера:
  1. #alert_dialog {
  2.     z-index: 999; 
  3.     width: 100%;
  4.     height: 100%;
  5.     position: absolute;
  6. }
  7.  
  8. /* Здесь для IE 7 и 8 лучше вставлять полупрозрачный PNG,
  9. а opacity убрать, т.к. эти браузеры это свойство не понимают. */
  10.  
  11. #alert_fog {
  12.     background: url("alert_fog.png") repeat scroll 50% 50% #666666;
  13.     opacity: 0.5;
  14.     z-index: 1000; 
  15.     width: 100%;
  16.     height: 100%;
  17. }
  18.  
  19. /* box-shadow и  border-radius IE 7 и 8 не понмиают,
  20. но это не испортит общей картины. */
  21.  
  22. #alert_body {
  23.     z-index: 1001; 
  24.     width: 300px; 
  25.     min-height: 100px; 
  26.     position: absolute;
  27.     top: 300px; 
  28.     left:50%;
  29.     background-color: #eeeeee;
  30.     border-radius: 8px;
  31.     margin-left:-150px;
  32.     padding: 15px;
  33.     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
  34. }
  35.  
  36. #alert_body hr {
  37.     border: 0;
  38.     margin: 0;
  39.     padding: 0;
  40.     height: 1px;
  41.     background: #DDDDDD;
  42. }
  43.  
  44. #alert_text {
  45.     display: block;
  46.     min-height: 80px;
  47.     padding-bottom: 5px;
  48. }
  49.  
  50. #alert_button {
  51.     display: block;
  52.     padding-top: 5px;
  53.     text-align: right;
  54. }

29.02.2012 Увеличение изображения по клику jQuery 29.02.2012 Увеличение изображения по клику jQuery 29.02.2012 Увеличение изображения по клику jQuery 29.02.2012 Замена стандартного ALERT с помощью JQUERY 29.02.2012 Замена стандартного ALERT с помощью JQUERY 29.02.2012 Замена стандартного ALERT с помощью JQUERY 29.02.2012 JQUERY: как вести логи действий пользователя 29.02.2012 JQUERY: раскрывающийся список
О сайте