Замена стандартного окна confirm

by Denis Tverdokhlebov

HTML

<div id="page">
  <div class="item">
    <div class="delete"></div>
  </div>
</div>

CSS

#confirmOverlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: url('ie.png');
  background: -moz-linear-gradient(rgba(11, 11, 11, 0.1), rgba(11, 11, 11, 0.6)) repeat-x rgba(11, 11, 11, 0.2);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(11, 11, 11, 0.1)), to(rgba(11, 11, 11, 0.6))) repeat-x rgba(11, 11, 11, 0.2);
  z-index: 100000;
}

#confirmBox {
  background: #ededed;
  width: 460px;
  position: fixed;
  left: 50%;
  top: 50%;
  margin: -130px 0 0 -230px;
  border: 1px solid rgba(33, 33, 33, 0.6);
  -moz-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset;
  -webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset;
}

#confirmBox p {
  font: 26px/1 'Cuprum', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
  background: url('header_bg.jpg') repeat-x left bottom #f5f5f5;
  padding: 18px 25px;
  /*text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);*/
  color: #666;
  margin-top: 0;
  width: 88%;
  margin: 0 auto;
  text-align: center;
}

#confirmBox h1 {
  font: 26px/1 'Cuprum', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
  background: #8b001f;
  background-position: left center;
  padding: 18px 25px;
  /*text-shadow: none;*/
  color: #666;
  margin-top: 0;
  text-align: center;
}

#confirmBox h1 {
  letter-spacing: 0.3px;
  color: #ffffff;
}

#confirmBox p {
  background: none;
  font-size: 16px;
  line-height: 1.4;
  padding-top: 25px;
}

#confirmButtons {
  padding: 15px 0 25px;
  text-align: center;
}

#confirmBox .button {
  display: inline-block;
  /*background:url('buttons.png') no-repeat;*/
  color: white;
  position: relative;
  height: 33px;
  font: 17px/33px 'Cuprum', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
  margin-right: 15px;
  padding: 0 35px 0 40px;
  text-decoration: none;
  border: none;
}

#confirmBox .button:last-child {
  margin-right: 0;
}

#confirmBox .button.blue span {
  position: absolute;
  top: 0;
 ...

JavaScript

$(document).ready(function() {

  $('.delete').click(function() {

    var elem = $(this).closest('.item');

    $.confirm({
      'title': 'Подтверждение удаления',
      'message': 'Вы решили удалить пункт. <br />После удаления его нельзя будет восстановить! Продолжаем?',
      'buttons': {
        'Да': {
          'class': 'blue',
          'action': function() {
            elem.slideUp();
          }
        },
        'Нет': {
          'class': 'gray',
          'action': function() {} // В данном случае ничего не делаем. Данную опцию можно просто опустить.
        }
      }
    });

  });

});

(function($) {

  $.confirm = function(params) {

    if ($('#confirmOverlay').length) {
      // Диалог подтверждения уже выведен на странице:
      return false;
    }

    var buttonHTML = '';
    $.each(params.buttons, function(name, obj) {

      // Генерируем разметку кнопок:

      buttonHTML += '<a href="#" class="button ' + obj['class'] + '">' + name + '<span></span></a>';

      if (!obj.action) {
        obj.action = function() {};
      }
    });

    var markup = [
      '<div id="confirmOverlay">',
      '<div id="confirmBox">',
      '<h1>', params.title, '</h1>',
      '<p>', params.message, '</p>',
      '<div id="confirmButtons">',
      buttonHTML,
      '</div></div></div>'
    ].join('');

    $(markup).hide().appendTo('body').fadeIn();

    var buttons = $('#confirmBox .button'),
      i = 0;

    $.each(params.buttons, function(name, obj) {
      buttons.eq(i++).click(function() {

        // Когда на кнопку нажимают, вызываем функцию действия
        // и закрываем диалог подтверждения.

        obj.action();
        $.confirm.hide();
        return false;
      });
    });
  }

  $.confirm.hide = function() {
    $('#confirmOverlay').fadeOut(function() {
      $(this).remove();
    });
  }

})(jQuery);