Красивое информационное сообщение на сайте, плагин Sweet Alert

Sweet Alert - это прекрасный плагин на JavaScript, который позволит сделать красивые информационные сообщения для вашего сайта:

Кроме простых информационных сообщений существует возможность вывода диалога, что позволит превратить скучные alert-ы в довольно стильные формы. Можно также легко заменить стандартный вывод сообщений в Joomla на модальное окно. Плагин прост в установке, имеет несколько шаблонов в стиле facebook, google и twitter.

Подключение плагина

• Скачиваем архив с официального сайта
• Распаковываем в папку на вашем сайте, например в папку sweetalert
• Подключаем:

  <script src="/sweetalert/dist/sweetalert.min.js"></script> 
  <link rel="stylesheet" type="text/css" href="/sweetalert/dist/sweetalert.css">

Использование плагина

Простой вызов формы

В скобках, через запятую можно указывать 3 параметра:

• 1. Заголовок сообщения
• 2. Текст сообщения
• 3. Тип сообщения ("warning", "error", "success" и "info")

<script type="text/javascript">
    swal("А вот и сообщение!", "Красивое, правда?", "info")
</script>

Диалоговое окно (альтернатива обычному alert)

Более сложный пример: допустим, прежде чем перейти по ссылке, вы хотите показать пользователю диалоговое окно, и в зависимости от его выбора он или останется на странице или будет переадресован.

Классический вариант

html-код ссылки:

<a href="http://google.ru" onclick="javascript: if (!confirm('Перейти к google.ru?')) return false;">Перейти в Google</a>

Вариант с использованием плагина Sweet Alert

html-код ссылки:

<a href="http://google.ru" title="Переход по внешней ссылке" onclick="return swalAlert(this)">Перейти в Google</a>

Определим функцию swalAlert():

<script type="text/javascript">
  function swalAlert(ln) {
        var link = ln.href; // Получаем значение тега href
        var title = ln.title; // Получаем значение тега title
        swal({
            title: title, // Заголовок окна
            text: link, // Текст в окне
            type: "warning", // Тип окна
            showCancelButton: true, // Показывать кнопку отмены
            closeOnConfirm: false // Не закрывать диалог после нажатия кнопки подтверждения
        },
        function() { // Выполнить действие при нажатии на кнопку подтверждения
            window.location.href = link;
        });
        return false;
    }
</script>

Кликните по ссылкам, ниже, чтобы посмотреть результат:

• Обычный alert: Перейти в Google
• С плагином Sweet Alert: Перейти в Google

Замена стандартного вывода ошибки в Joomla на диалоговое окно

С помощью плагина можно довольно легко заменить стандартный вывод ошибки на модальное окно.

html-код ошибки в Joomla:

<div id="system-message-container">
  <div id="system-message">
    <div class="alert ">
      <a class="close" data-dismiss="alert">×</a>
      <h4 class="alert-heading">Предупреждение</h4>
      <div>
        <p class="alert-message">Имя пользователя и пароль не совпадают или у вас ещё нет учётной записи на сайте</p>
      </div>
  </div>
</div>

Если ошибки нет то область #system-message-container будет пустой:

<div id="system-message-container">
</div>

Все что нам нужно это написать функцию, которая будет проверять наличие заголовка h4.alert-heading и выводить модальное сообщение, если он есть

Для начала скроем область ошибки joomla насовсем. Для этого добавьте в конец файла со стилями, вашего шаблона (для protostar: /templates/protostar/css/template.css), строку:

#system-message-container { display: none !important }

Функцию вывода сообщения добавим в footer /templates/protostar/index.php):

<!-- Footer -->
<footer class="footer" role="contentinfo">
    <script src="/templates/protostar/js/sweetalert/dist/sweetalert.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/templates/protostar/js/sweetalert/dist/sweetalert.css">
    <script type="text/javascript">
        var aheader = document.querySelector('#system-message-container .alert-heading');
        var atext = document.querySelector('#system-message-container .alert-message');
        if (atext.innerHTML != '') swal(aheader.innerHTML, atext.innerHTML, "info");
    </script>
    ...
</footer>

Вот таким простым способом вместо стандартного вывода Joomla мы получаем модальное диалоговое окно.

Параметры плагина

Ниже показаны основные параметры плагина, более подробно смотрите на официальном сайте, там же есть много примеров использования, сайт на английском, но все довольно понятно.

• title (null, обязательный): заголовок модального окна;
• text (null): текст в окне;
• type (null): Ттп модального окна: "warning", "error", "success" или "info";
• allowOutsideClick (false): закрывать окно, при клике за его пределами;
• showCancelButton (false): показывать кнопку отмены;
• confirmButtonText ("OK"): текст кнопки-подтверждения;
• confirmButtonColor ("#AEDEF4"): цвет кнопки-подтверждения;
• cancelButtonText ("Cancel"): текст кнопки отмены;
• imageUrl (null): адрес собственной иконки;
• imageSize ("80x80"): размер иконки;