Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Фиксированные уведомления с помощью Bootstrap Alerts - show-notification

Дата добавления: 01.10.2020 - 06:56
Добавил: Buger
Количество просмотров: 45
Количество комментариев: 0
Размер файла: 6.9 Kb
Рейтинг материала: 0.0 / 0
Фиксированные уведомления с помощью Bootstrap Alerts - show-notification
рейтинг 0.0
/
голосов 0
Простой в использовании плагин jQuery/Bootstrap, который использует компонент предупреждений Bootstrap для динамического создания фиксированных, отклоняемых, складываемых всплывающих окон уведомлений в правом верхнем углу страницы.

Как использовать:
1. Подключим скрипт bootstrap-show-notification.js в свой проект Bootstrap.
Код
<!-- Bootstrap Файлы -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

<!-- Bootstrap show-notification -->
<script src="/path/to/src/bootstrap-show-notification.js"></script>


2. Отобразим на странице основное уведомление о предупреждении.
Код
$.showNotification({
  body: "A Basic Notification" // Базовое уведомление
})


3. Также поддерживаются HTML-теги.
Код
$.showNotification({
  body: "<h3>A Basic Notification</h3>"
})


4. Определим тип уведомления:
  • primary (по умолчанию)
  • secondary
  • success
  • danger
  • warning
  • info
  • light
  • dark

Код
$.showNotification({
  body: "A Basic Notification",
  type: "warning"
})


5. Определим, сколько времени потребуется для автоматического исчезания. По умолчанию: 5500 мс.
Код
$.showNotification({
  body: "A Basic Notification",
  duration: 3000
})


6. Определим направление. По умолчанию: prepend.
Код
$.showNotification({
  body: "A Basic Notification",
  direction: "append"
})


7. Настройте внешний вид всплывающего уведомления.
Код
$.showNotification({

  // max width
  maxWidth: "520px",

  // box shadow
  shadow: "0 2px 6px rgba(0,0,0,0.2)",  

  // z-index
  zIndex: 100,

  // margin
  margin: "1rem"
   
})
Добавлять комментарии могут только зарегистрированные пользователи.


Поделись с друзьями: