Bootstrap 3 - Сообщения (Alerts)

На этом уроке Вы научитесь создавать различные виды сообщений с помощью платформы Twitter Bootstrap 3.

Создание сообщений с помощью Twitter Bootstrap 3

Сообщения используются на сайтах довольно часто для того, чтобы пользователь обратил на них внимание. Сообщения которые можно создавать с помощью Twitter Bootstrap можно отнести к нескольким категориям: предупреждающие сообщения (warning alerts), сообщения об ошибки (error или danger alerts), сообщения об успешном выполнении какого-либо действия (success alerts), сообщения требующие подтверждения (confirmation alerts) и информационные сообщения (information alerts).

Для создания любого вида сообщений необходимо текст сообщения поместить в контейнер <div>, добавить к нему класс .alert и дополнительный класс, отвечающий за вывод конкретного вида сообщения. Различные виды сообщений приведены ниже:

Предупреждающее сообщение

Дополнительный класс: .alert-warning.
<div class="alert alert-warning">
  <strong>Предупреждение!</strong> Обнаружены проблемы с сетевым соединением.
</div>
Предупреждение! Обнаружены проблемы с сетевым соединением.

Сообщение об ошибке

Дополнительный класс: .alert-danger.
<div class="alert alert-danger">
  <strong>Ошибка!</strong> Отправка данных не завершена.
</div>
Ошибка! Отправка данных не завершена.

Сообщение об успешном выполнении действия или подтверждающее сообщение

Дополнительный класс: .alert-success.
<div class="alert alert-success">
  Сообщение отправлено успешно.
</div>
Сообщение отправлено успешно.

Информационные сообщения

Дополнительный класс: .alert-info.
<div class="alert alert-info">
  Выпуск первой версии Twitter Bootstrap состоялся в августе 2011 года.
</div>
Выпуск первой версии Twitter Bootstrap состоялся в августе 2011 года.

Закрытие сообщений с помощью атрибутов data

Для закрытия сообщений можно воcпользоваться прикладным интерфейсом Bootstrap API Data. Для этого необходимо добавить атрибут data-dismiss="alert" к вашей кнопки, с помощью которой будет осуществляться закрытие сообщения. Кнопки "закрыть" можно создать с помощью элементов <a>, <button> или <span>. После этого применить к ним класс Bootstrap "close" для правильного стилевого оформления. Для демонстрации данной функциональности рассмотрим ниже расположенный пример:

<!-- Сообщение об ошибке -->
<div class="alert alert-danger">
  <!-- Кнопка для закрытия сообщения, созданная с помощью элемента a -->
  <a href="#" class="close" data-dismiss="alert">×</a>
  Неизвестная ошибка при передаче данных.
</div>

<!-- Сообщение об успешном выполнения действия -->
<div class="alert alert-success">
  <!-- Кнопка для закрытия сообщения, созданная с помощью элемента button -->
  <button type="button" class="close" data-dismiss="alert">×</button>
  Сообщение отправлено успешно.
</div>

<!-- Предупреждающее сообщение -->
<div class="alert alert-warning">
  <!-- Кнопка для закрытия сообщения, созданная с помощью элемента span -->
  <span class="close" data-dismiss="alert">×</span>
  Введённые пароли не совпадают!
</div>
× Неизвестная ошибка при передаче данных.
Сообщение отправлено успешно.
× Введённые пароли не совпадают!

Закрытие сообщений с помощью JavaScript

Для закрытия сообщений также можно воcпользоваться ниже расположенным синтаксисом на языке JavaScript, состоящего из идентификатора кнопки (#idbutton) и метода alert('close'). Метод alert('close') предназначен для закрытия сообщения.

$('#idbutton').alert('close');

На следующем примере продемонстрируем, как можно закрыть сообщение с помощью сценария на языке JavaScript:

<h4>Сообщения, для закрытия которых используется метод alert('close')</h4>
<div id="myAlert5" class="alert alert-success">
  <span class="close">&times;</span>
  Ваше действие выполнено успешно.
</div>
<div id="myAlert5" class="alert alert-warning">
  <span class="close">&times;</span>
  <strong>Предупреждение!</strong> Обнаружены проблемы с сетевым подключением.
</div>

<script type="text/javascript">
  $(function(){
    $(".close").click(function(){
      $("#myAlert5").alert('close');
    });
});
</script>

Сообщения, для закрытия которых используется метод alert('close')

× Ваше действие выполнено успешно.
× Предупреждение! Обнаружены проблемы с сетевым подключением.

События

Следующая таблица содержит список событий предназначенных для работы с сообщениями:

Событие Описание Пример
close.bs.alert Событие срабатывает перед закрытием сообщения $('#idalert').bind('close.bs.alert', function () { // сделать что-нибудь... })
closed.bs.alert Событие срабатывает после закрытия сообщения $('#myalert').bind('closed.bs.alert', function () { // сделать что-нибудь... })

Продемонстрируем работу с событиями с помощью ниже расположенного кода:

<script type="text/javascript">
$(document).ready(function(){
  $("#myAlert").bind('close.bs.alert', function(){
    alert("Действие перед закрытием сообщения.");
  });
  $("#myAlert").bind('closed.bs.alert', function(){
    alert("Действие после закрытия сообщения.");
  });
});  
</script>

...

<div id="myAlert" class="alert alert-info">
  <span class="close" data-dismiss="alert">×</span>
  HTML5 находится в разработке
</div>

Сообщение, появляющееся перед закрытием сообщения:

Событие перед закрытием сообщения

Сообщение, которое появляется после закрытия сообщения:

Событие после закрытия сообщения


   Bootstrap 0    10187 0

Комментарии (6)

  1. Сергей # 0
    В примере «Закрытие сообщений с помощью JavaScript» валидаторы ругаются на код из-за дублирования идентификатора «myAlert5». Я переписал пример, но не уверен, корректен ли мой вариант:
     <h4>Сообщения, для закрытия которых используется метод alert('close')</h4>
     <div class="alert alert-success">
       <span class="close">×</span>
       Ваше действие выполнено успешно.
     </div>
     <div class="alert alert-warning">
       <span class="close">×</span>
       <strong>Предупреждение!</strong> Обнаружены проблемы с сетевым подключением.
     </div>
     <script type="text/javascript">
      $(".close").click(function(){$(this).alert('close');});
    </script>
    <code>
    1. Александр Мальцев # 0
      Сергей, метод alert необходимо вызывать для элемента div, имеющего класс alert.
      Так будет корректней:
       <script type="text/javascript">
        $(".close").click(function(){$(this).parent().alert('close');});
      </script>
      
    2. Сергей # 0
      Валидаторы выдают предупреждения на bootstrap-сss и -js файлы при их подключении, хотя браузеры отображают страницы вроде корректно. Это я накосячил у себя, или у всех так?
      1. Александр Мальцев # 0
        А что за валидатор? Они обычно описывают в каком месте произошла ошибка и в чём она заключается. Попробуйте разобраться, что эта за ошибка и исправить её.
      2. Артем # 0
        Сообщение об ошибкие В названии раздела
        1. Александр Мальцев # 0
          Спасибо, Артём! Поправил.

        Вы должны авторизоваться, чтобы оставлять комментарии.