Стилизованный alert улучшенный

Пример использования

Код для реализации

Добавляем стили и сам скрипт. А так же библиотеку для IE10- classList

<link rel="stylesheet" href="alert.css" type="text/css">
<script type="text/javascript" src="demo/alert-best/alert.min.js"></script>

Для IE10- следует подключить скрипт classList

<!--[if lt IE 10]><script src="https://cdn.jsdelivr.net/classlist/2014.01.31/classList.min.js"></script><![endif]-->

Кнопки, по которым будем кликать

<div class="button" data-alert-title="Title" data-alert-content="Content stylesed alert" data-alert-cancel="yes" data-alert-ok-name="YES" data-alert-after-function="alert('Click on close button stylesed alert!')" data-alert-ok-function="alert('Click on OK button stylesed alert!')" data-alert-cancel-function="alert('Click on CANCEL button stylesed alert!')" data-alert-cancel-name="NO">alert with attributes data-*</div>
<div class="button" data-alert-title="Error!!!" data-alert-content="Oh no! A mistake again." data-alert-type="error">alert error</div>
<div class="button" data-alert-title="Warning!" data-alert-content="Mind the character number." data-alert-type="warning">alert warning</div>

Возможные параметры:

• data-alert-title - Заголовок
• data-alert-content - Содержимое
• data-alert-after-function - Функция, которая будет выполнена после закрытия, нажав на крестик
• data-alert-button - Наличие блока с кнопками, по умолчанию есть
• data-alert-ok-name - Имя кнопки OK
• data-alert-ok-function - Функция, которая будет выполнена после закрытия, нажав на ok
• data-alert-cancel - Наличие кнопки cancel
• data-alert-cancel-name - Имя кнопки cancel
• data-alert-cancel-function - Функция, которая будет выполнена после закрытия, нажав на cancel
• data-alert-type - Тип стилизованного alert'а

Эти параметры задаются атрибутами для элемента, по которому происходит клик.

Для вызова через объект применяется теже имена, только в camelCase. Например так:

new Alert({ alertTitleText : 'Заголовок', alertContentText : 'Содержимое' });

Добавляем обработчики на каждую кнопку

(function(){
  var buttons = document.getElementsByClassName('button');
  for (var i = 0; i < buttons.length; i++) {
      buttons[i].addEventListener('click', function(){
          var newAlert = new Alert(this);
      });
  };
}());

Так же работают кнопки клавиатуры:

• Enter - идентично нажатию на OK
• Escape - идентично нажатию на cancel

Так же можно скачать скрипт с гитхаба