bootstrap-modal-pic

Продолжаем разбираться с Bootstrap.
Модальные окна в своей роде очень полезная штука. С их помощью можно выводить полезную инфу, добавлять формы подписки и не только. Главное — не переборщить и не быть назойливыми.

Никогда не выводите модальное окно без разрешения посетителя, т.е. без соответствующего действия с его стороны (нажатие кнопки подписки, нажатие ссылки «подробнее» и тд.).
Для меня это как «красная тряпка для быка» — раздражает.
В крайнем случае, используйте для оповещения супер-мега скидок и акций и всё.

Разберем теперь вызов модального окна.
Если были установлены все компоненты Bootstrap, то никаких дополнительных строчок кода прописывать не надо.
Стандартный код вызова модального окна выглядит так:

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Заголовок</h4>
      </div>
      <div class="modal-body">Тело модального окна</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Выход</button>
 
      </div>
    </div>
  </div>
</div>

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

Вызвать появление модального окна можно с помощью кнопки или ссылки.

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
       Кнопка
      </button>

Элемент button имеет два собственных атрибута данных: data-toggle и data-target. Переключатель data-toggle указывает Bootstrap, что ему нужно открыть всплывающее окно, а data-target указывает на элемент для открытия. Поэтому, после нажатия на кнопку появится модальное окно с идентификатором «myModal».
Модальное окно Bootstrap имеет 2 размера: большой и маленький.

<!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Большая модаль</button>
 
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>
 
<!-- Small modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Малая модаль</button>
 
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Пример кнопки вызова и само модальное окно с формой подписки:
bootstrap-modal-01

Скачать компоненты Bootstrap Modal можно с официального сайта.
Bootstrap Modal — лучшее решение для тех, кто не разбирается в скриптах и без нагромождения сайта плагинами.

http://www.seovasikaru.com/wp-content/uploads/2015/12/modal-pic.jpghttp://www.seovasikaru.com/wp-content/uploads/2015/12/modal-pic-150x150.jpgvasikaruBootstrapНовостиbootstrap,модальное окноПродолжаем разбираться с Bootstrap. Модальные окна в своей роде очень полезная штука. С их помощью можно выводить полезную инфу, добавлять формы подписки и не только. Главное - не переборщить и не быть назойливыми. Разберем теперь вызов модального окна. Если были установлены все компоненты Bootstrap, то никаких дополнительных строчок кода прописывать не...Создание сайтов, продвижение сайтов, seo, юзабилити