Форма обратной связи в модальном окне bootstrap – Разработка модальной формы входа, регистрации и восстановления пароля с помощью Bootstrap

Содержание

Верстка формы обратной связи используя Bootstrap

Вы здесь: Главная - PHP - PHP Основы - Верстка формы обратной связи используя Bootstrap

Верстка формы обратной связи используя Bootstrap

На прошлом уроке мы научились с вами создавать простую HTML форму обратной связи без всякого оформления и PHP обработчик данных этой формы. Сейчас я покажу вам, как сделать верстку формы обратной связи средствами CSS, используя знаменитый фреймворк Bootstrap.

Нам не надо создавать свой файл стилей CSS, он уже создан разработчиками. Все что вам надо, это подключить к нашему файлу form.php ссылку на ../bootstrap.min.css на официальном сайте Bootstrap. Открываете Getbootstrap, копируете саму верхнюю ссылку на файл стилей в разделе Bootstrap CDN и вставляете ее на страничку с формой между тегами head. Смотрите ниже скриншот:

Верстка формы обратной связи 
используя Bootstrap

Этот фреймворк очень здорово облегчает жизнь веб-разработчика, не нужно придумывать свои CSS стили, берем уже готовые шаблоны и прописываем в нужное место подходящие нам классы. Процесс верстки формы обратной связи вместе с Bootstrap будет увлекательным и конечный результат вас обязательно порадует.

Заходим в раздел "getbootstrap.com/css/#forms" и в качестве основы берем образец базовой формы. Затем копируем код и вставляем его к себе на страницу form.php, выше нашей ранее созданной формы (ее пока оставим на месте в качестве примера), а чтобы форма не расползалась на всю ширину браузера, обертываем ее в контейнер:

 <div>
   ...
 </div>

Используя класс col-md-4 с помощью Grid System (сеточной системы), разделим страницу на 3 части и поместим нашу форму в средний блок.

  <div>
  <div>пустой блок
  </div>
  <div>наша форма здесь
  </div>
  <div>пустой блок
  </div>
  </div>

Новая форма содержит поля, которых не было в нашей оригинальной форме - это file input и checkbox. Удалим их из кода.

Верстка формы обратной связи 
используя Bootstrap

Добавим еще одно поле, путем копирования div блока и все что внутри него.

<div>...</div>

Сейчас у формы три поля, пописываем им названия как в нашей исходной форме и добавляем четвертое широкое поле для ввода сообщений textarea, поместив его в блок div.

 <div>
   <label for="message">Сообщение</label>
   <textarea rows="3"></textarea>
 </div>
Верстка формы обратной связи 
используя Bootstrap

На скриншоте выше - кнопка «Отправить сообщение» выглядит слишком бледно, идем в раздел

button и подберем что-нибудь повеселее. Выберем кнопку с голубым цветом, ему соответствует - class="btn btn-info".

Верстка формы обратной связи 
используя Bootstrap
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <!-- Latest compiled and minified CSS -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh5u" crossorigin="anonymous">
   <title>Верстка формы обратной связи используя Bootstrap</title>
</head>
<body>
<div> </div>
<div>
<div>
<div> </div>
<div>
   <h5>Форма обратной связи на Bootstrap</h5>
   <form action="./mail.php" method="post">
<div>
   <label for="name">Ваше имя:</label>
   <input type="name" name="name" placeholder="Name">
</div>
<div>
   <label for="email1">E-mail:</label>
   <input type="email" name="email" placeholder="Email">
</div>
<div>
   <label for="phone">Номер телефона:</label>
   <input type="phone" name="phone" placeholder="Phone">
</div>
<div>
   <label for="message">Сообщение:</label>
   <textarea name="message" rows="3"></textarea>
</div>
   <button type="submit">Отправить сообщение</button>
</form>
</div>
<div> </div> </div>
</div>
</body>
</html>

Только что сверстанная форма с помощью Bootstrap рабочая, то есть может отправлять данные на почту. Смотрите код PHP обработчика - mail.php на этом уроке.

  • Верстка формы обратной связи 
используя Bootstrap
    Создано 17.08.2017 11:02:36
  • Верстка формы обратной связи 
используя Bootstrap Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href="https://myrusakov.ru" target="_blank"><img src="https://myrusakov.ru/images/button.gif" alt="Как создать свой сайт" /></a>

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:
    <a href="https://myrusakov.ru" target="_blank">Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL="https://myrusakov.ru"]Как создать свой сайт[/URL]

Модальное окно. Компоненты · Bootstrap. Версия v4.0.0

Используйте модальный плагин Bootstrap для добавления диалогов на ваш сайт для лайтбоксов, уведомлений пользователей или полностью настраиваемого контента.

Как это работает

До того как начать работу с модальными компонентами Bootstrap, ознакомьтесь со следующей информацией, т.к. параметры недавно изменились.

  • Модальные окна сделаны на HTML, CSS и JavaScript. Они располагаются поверх всего документа и блокируют прокрутку тела документа
    <body>
    , вместо него прокручивая модальные окна
  • Клик вне модального элемента автоматически закрывает его.
  • Bootstrap позволяет активировать лишь один модальный элемент за раз. Вложенные модальные элементы не поддерживаются, т.к. мы думаем, что они принесли бы неудобства.
  • Модальные элементы имеют position: fixed, что может вызвать иногда их частичную отрисовку. Мы рекомендуем размещать модальные элементы на самом верху страницы, когда возможно, для избегания сбоев и влияния других элементов на корректную работу модальных элементов .modal.
  • Опять же – из-за position: fixed есть некоторые сложности при использовании их на мобильных устройствах. Смотри документацию поддержки в браузерах.
  • Из-за семантики HTML5 атрибут autofocus не работает с модальными элементами Bootstrap. Чтобы добиться такого же эффекта, используйте собственный JavaScript:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

Далее – использование и примеры.

Примеры

Модальные компоненты

Ниже – пример статичного модального компонента (это значит, что его position и display «преодолены»). В примере есть заголовок модального компонента, тело (требуется для padding), футер модального компонента (по желанию). Мы советуем включать заголовки с отклонением действия, когда возможно, или обеспечить другой явный путь отклонить действие.

Modal body text goes here.

<div tabindex="-1" role="dialog">
  <div role="document">
    <div>
      <div>
        <h5>Modal title</h5>
        <button type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div>
        <p>Modal body text goes here.</p>
      </div>
      <div>
        <button type="button">Save changes</button>
        <button type="button" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

«Живое» демо

Изменяйте (скрывайте\показывайте) рабочий пример модального элемента по клику на кнопку ниже. Окно сползет вниз и возникнет в верху страницы.

Woohoo, you're reading this text in a modal!

Запустить модальное окно

<!-- Button trigger modal -->
<button type="button" data-toggle="modal" data-target="#exampleModal">
  Запустить модальное окно
</button>

<!-- Modal -->
<div tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div role="document">
    <div>
      <div>
        <h5>Modal title</h5>
        <button type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div>
        ...
      </div>
      <div>
        <button type="button" data-dismiss="modal">Close</button>
        <button type="button">Save changes</button>
      </div>
    </div>
  </div>
</div>

Прокрутка длинного содержимого

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

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Запустить модальное окно

<!-- Button trigger modal -->
<button type="button" data-toggle="modal" data-target="#exampleModalLong">
  Запустить модальное окно
</button>

<!-- Modal -->
<div tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div role="document">
    <div>
      <div>
        <h5>Modal title</h5>
        <button type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div>
        ...
      </div>
      <div>
        <button type="button" data-dismiss="modal">Close</button>
        <button type="button">Save changes</button>
      </div>
    </div>
  </div>
</div>

Вертикальное центрирование

Добавьте .modal-dialog-centered в .modal-dialog чтобы вертикально центрировать модальное окно.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Запустить модальное окно

<!-- Button trigger modal -->
<button type="button" data-toggle="modal" data-target="#exampleModalCenter">
  Запустить модальное окно
</button>

<!-- Modal -->
<div tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div role="document">
    <div>
      <div>
        <h5>Modal title</h5>
        <button type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div>
        ...
      </div>
      <div>
        <button type="button" data-dismiss="modal">Close</button>
        <button type="button">Save changes</button>
      </div>
    </div>
  </div>
</div>

Всплывающие подсказки и возникающие подсказки

Всплывающие подсказки и возникающие подсказки можно размещать как необходимо. Когда модальные элементы закрыты, любые всплывающие подсказки и возникающие подсказки внутри них также автоматически отменяются.

Popover in a modal

This button triggers a popover on click.


Tooltips in a modal

This link and that link have tooltips on hover.

Запустить модальное окно

<div>
  <h5>Popover in a modal</h5>
  <p>This <a href="#" role="button" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
  <hr>
  <h5>Tooltips in a modal</h5>
  <p><a href="#" title="Tooltip">This link</a> and <a href="#" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

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

Используйте систему сеток Bootstrap внутри модального элемента, расположив .container-fluid внутри .modal-body. После этого используйте обычную систему сеток обычным образом.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-auto

.col-md-2 .ml-auto

Level 1: .col-sm-9

Level 2: .col-8 .col-sm-6

Level 2: .col-4 .col-sm-6

Запустить модальное окно

<div>
  <div>
    <div>
      <div>.col-md-4</div>
      <div>.col-md-4 .ml-auto</div>
    </div>
    <div>
      <div>.col-md-3 .ml-auto</div>
      <div>.col-md-2 .ml-auto</div>
    </div>
    <div>
      <div>.col-md-6 .ml-auto</div>
    </div>
    <div>
      <div>
        Level 1: .col-sm-9
        <div>
          <div>
            Level 2: .col-8 .col-sm-6
          </div>
          <div>
            Level 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Комбинируйте содержимое модальных элементов

Есть много кнопок, которые все запускают один модальный элемент со слегка разным содержимым? Используйте event.relatedTarget и атрибуты data-* (возможно через jQuery) для изменения содержимого в зависимости от нажатой кнопки.

Ниже – пример демо с кодом HTML и JavaScript. Для информации по relatedTarget читайте инфо по событиям модальных элементов.

Open modal for @mdo Open modal for @fat Open modal for @getbootstrap
<button type="button" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<div tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div role="document">
    <div>
      <div>
        <h5>New message</h5>
        <button type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div>
        <form>
          <div>
            <label for="recipient-name">Recipient:</label>
            <input type="text">
          </div>
          <div>
            <label for="message-text">Message:</label>
            <textarea></textarea>
          </div>
        </form>
      </div>
      <div>
        <button type="button" data-dismiss="modal">Close</button>
        <button type="button">Send message</button>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Анимация при удалении

Для модальных элементов, которые возникают простым способом, а не появляются плавно, удалите из кода модального элемента класс .fade.

<div tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true">
  ...
</div>

Динамическая высота

Если высота модального элемента изменяется при его открытии, вам следует вызвать $('#myModal').modal('handleUpdate') для обновления позиции модального элемента в случае, если возникнет полоса прокрутки.

Доступность

Удостоверьтесь, что добавили в .modal role="dialog" и aria-labelledby="...", привязанные к названию модального элемента, и role="document" в .modal-dialog. Дополнительно вы можете описать диалог модального элемента атрибутом aria-describedby, добавленным в .modal.

Встраивание видео из YouTube

Встраивание видео в модальные элементы требует дополнительного JavaScript для запрета автоматического воспроизведения и т.д. Дополнительная информация здесь.

Дополнительные размеры

У модальных элементов есть два размера, доступных к изменению через классы-модификаторы, которые надо размещать в элементе .modal-dialog. Эти размеры включаются на определенных брейкпойнтах, чтобы избежать появления горизонтальных полос прокрутки на более узких зонах просмотра.

Большое модальное окно Малое модальное окно

<!-- Большое модальное окно -->
<button type="button" data-toggle="modal" data-target=".bd-example-modal-lg">Большое модальное окно</button>

<div tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div>
    <div>
      ...
    </div>
  </div>
</div>

<!-- Малое модальное окно -->
<button type="button" data-toggle="modal" data-target=".bd-example-modal-sm">Малое модальное окно</button>

<div tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div>
    <div>
      ...
    </div>
  </div>
</div>

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

Плагин модальных элементов переключает состояние вашего скрытого содержимого по требованию с помощью атрибутов или JavaScript. Он также добавляет в <body> класс .modal-open для преодоления поведения при прокрутке по умолчанию, и создает зону для клика вне модального элемента, нужную для закрытия открытых модальных элементов, класс .modal-backdrop.

Через атрибуты

Активируйте модальный элемент без JavaScript. Установите data-toggle="modal" в контролирующем элементе, таком как кнопка, наряду с data-target="#foo" или href="#foo", для обращения к функциональности “toggle” для частного модального элемента.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Через JavaScript

Вызовите модальный элемент с id=”myModal” одной строкой JavaScript:

$('#myModal').modal(options)

Параметры

Параметры можно передавать атрибутами или JavaScript. Для использования атрибутов добавьте имя параметра в data-, например data-backdrop="".

Название Тип По умолч. Описание
backdrop boolean or the string 'static' true Подключает модальный элемент с затемненным фоном. Еще – задает static для фона, который не закрывает модальный элемент по клику на фоне.
keyboard boolean true Закрывает модальный элемент по нажатию ESC.
focus boolean true Фокусируется на модальном элементе по инициализации.
show boolean true Показывает модальный элемент по инициализации.

Методы

Асинхронные методы и переходы

Все методы API асинхронны и запускают переход. Они возвращаются функции, вызвавшей их, с началом перехода, но до его конца. Плюс, вызов метода к компоненту, выполняющему переход, будет проигнорирован.

Смотрите документацию JavaScript

.modal(options)

Активирует содержимое как модальный элемент. Принимает object параметров.

$('#myModal').modal({
  keyboard: false
})
.modal('toggle')

Вручную изменяет состояние модального элемента. Возвращается к функции-вызову до того, как модальный элемент показан или скрыт. (т.е. до того, как произойдет событие shown.bs.modal или hidden.bs.modal).

$('#myModal').modal('toggle')
.modal('show')

Вручную открывает модальный элемент. Возвращается к функции-вызову до того, как модальный элемент показан. (т.е. до того, как произойдет событие shown.bs.modal).

$('#myModal').modal('show')
.modal('hide')

Вручную прячет модальный элемент. Возвращается к функции-вызову до того, как модальный элемент показан. (т.е. до того, как произойдет событие hidden.bs.modal).

$('#myModal').modal('hide')
.modal('handleUpdate')

Вручную обновляет позицию модального элемента, если высота его изменяется во время открытия (т.е. в случае возникновения полосы прокрутки).

$('#myModal').modal('handleUpdate')

.modal('dispose')

Уничтожает модальный элемент.

События

Модальный элемент в Bootstrap имеет несколько событий для встраивания в функциональность. Все события модальных элементов запускаются внутри самих элементов (т.е. в <div>).

Тип события Описание
show.bs.modal Это событие запускается немедленно, когда экземпляр метода show вызван. Если оно вызвано кликом, элемент, на который кликнули, доступен как свойство события relatedTarget.
shown.bs.modal Это событие запускается, когда модальный элемент сделан видимым юзеру (будет ждать завершения переходов CSS). Если оно вызвано кликом, элемент, на который кликнули, доступен как свойство события relatedTarget.
hide.bs.modal Это событие запускается немедленно, когда экземпляр метода hide вызван.
hidden.bs.modal Это событие запускается, когда модальный элемент больше не является скрытым (будет ждать завершения переходов CSS).
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Bootstrap 3 форма обратной связи – три вида и модальное окно для сайта

Доброго времени суток, мои верные читатели и гости сайта. В сегодняшней публикации мы поговорим о знакомых вам формах регистрации, заказа товаров, входа на сайт и других. Все это в общем называется в Bootstrap 3 форма обратной связи. Эту штуку действительно полезно знать и уметь пользоваться.

Поэтому после прочтения статьи вы будете уметь создавать три вида простых форм, научитесь их настраивать, ознакомитесь со встроенными типами полей и с модальными окнами, а также сможете закрепить полученный теоретический материал на практике. Ну что ж, давайте приступать к обучению!

Формы. Какие они бывают?

Фреймворк Bootstrap поддерживает три вида форм, которые отличаются друг от друга выравниванием полей ввода данных. К ним относятся вертикальная, горизонтальная и встроенная.

Все они могут использовать встроенные типы текстовых полей, в которые входят: text, date, email, search, color, time и т.д. С их помощью осуществляется валидация введенной информации и при некорректном ее написании пользователю выводится сообщение с указанием на ошибки.

А теперь давайте подробнее разберем каждый тип форм.

Vertical Forms

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

В качестве примера я создал базовую форму с проверкой полей ввода при помощи встроенных типов.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Пример стандартной формы</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
 
<div>
  <h3>Вертикальная форма</h3>
  <form>
    <div>
      <label for="email">Email:</label>
      <input type="email" placeholder="Введите email">
    </div>
    <div>
      <label for="pwd">Пароль:</label>
      <input type="password" placeholder="Введите пароль">
    </div>
<div>
      <label for="dat">Дата рождения:</label>
        <input type="date" placeholder="Введите дату рождения">
    </div>
<div>
      <label for="txt">Имя Фамилия:</label>
        <input type="text" placeholder="Введите имя и фамилию">
    </div>
    <div>
      <label><input type="checkbox"> Запомнить меня</label>
       <button type="submit">Отправить</button>
    </div>
  </form>
</div>
</body>
</html>

<!DOCTYPE html> <html lang="en"> <head> <title>Пример стандартной формы</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div> <h3>Вертикальная форма</h3> <form> <div> <label for="email">Email:</label> <input type="email" placeholder="Введите email"> </div> <div> <label for="pwd">Пароль:</label> <input type="password" placeholder="Введите пароль"> </div> <div> <label for="dat">Дата рождения:</label> <input type="date" placeholder="Введите дату рождения"> </div> <div> <label for="txt">Имя Фамилия:</label> <input type="text" placeholder="Введите имя и фамилию"> </div> <div> <label><input type="checkbox"> Запомнить меня</label> <button type="submit">Отправить</button> </div> </form> </div> </body> </html>

Inline Forms

В окнах встроенного типа все элементы расположены в одну линию (если это позволяет размер экрана). При этом объекты выравниваются по левому краю, а подписи окон и других видов элементов ввода персональной информации располагаются практически без отступов друг от друга.

Для того чтобы создать такой вид окна обратной связи, нужно добавить в код класс .form-inline. Поэтому для предыдущего примера измените строки заголовка <form> на:

  <h3>Встроенная форма</h3>

<form>

Horizontal Forms

Текущий вид форм несколько отличается от двух предыдущих, во-первых, количеством элементов разметки, а во-вторых, презентацией формы.

Так, вам потребуется прописать класс .form-horizontal в теге <form> и после к каждому элементу <label> добавить класс .control-label. И это еще не все. Для реализации horizontal forms вам потребуется из своей памяти достать уже выученный вами материал из прошлых публикаций, касающийся верстки сеток фреймворка.

В прикрепленном выше примере я выделил 2 колонки под наименования полей, а 10 колонок – под само поле ввода.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Пример стандартной формы</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
 
<div>
  <h3>Горизонтальная форма</h3>
  <form>
    <div>
      <label for="email">Email:</label>
<div>
 
      <input type="email" placeholder="Введите email">
    </div>
 </div>
    <div>
      <label for="pwd">Пароль:</label>
<div>
      <input type="password" placeholder="Введите пароль">
    </div>
 </div>
<div>
      <label for="dat">Дата рождения:</label>
<div>
        <input type="date" placeholder="Введите дату рождения">
    </div>
</div>
<div>
      <label for="txt">Имя Фамилия:</label>
<div>
        <input type="text" placeholder="Введите имя и фамилию">
    </div>
 </div>
<div>
      <div>
    <div>
      <label><input type="checkbox"> Запомнить меня</label>
       <button type="submit">Отправить</button>
    </div>
</div>
</div>
 
  </form>
</div>
 
</body>
</html>

<!DOCTYPE html> <html lang="en"> <head> <title>Пример стандартной формы</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div> <h3>Горизонтальная форма</h3> <form> <div> <label for="email">Email:</label> <div> <input type="email" placeholder="Введите email"> </div> </div> <div> <label for="pwd">Пароль:</label> <div> <input type="password" placeholder="Введите пароль"> </div> </div> <div> <label for="dat">Дата рождения:</label> <div> <input type="date" placeholder="Введите дату рождения"> </div> </div> <div> <label for="txt">Имя Фамилия:</label> <div> <input type="text" placeholder="Введите имя и фамилию"> </div> </div> <div> <div> <div> <label><input type="checkbox"> Запомнить меня</label> <button type="submit">Отправить</button> </div> </div> </div> </form> </div> </body> </html>

Ну а для чего же тогда модальные окна?

Для начала стоит сказать, что в Bootstrap есть такой плагин, как Modal plugin. Он как раз и отвечает за описываемый инструмент, который появляется при нажатии на кнопку. В модальном окне обычно выводится некая дополнительная информация или сообщение о произведенных действиях.

К примеру, после отправки формы регистрации (после нажатия на кнопку «Отправить») пользователю выводится сообщение «Вы успешно зарегистрированы».

Для того чтобы создать модальное окно, вам нужно реализовать программный код, который условно можно разделить на 3 части:

  1. Написание триггера.

    При реализации кнопки в теге <button> нужно дописать

    data-toggle="modal" data-target="#myModal"

  2. Создание оболочки «Modal».

    Для этого в блоке необходимо установить идентификатор с тем же именем, что и в data-target. Здесь же нужно добавить класс .modal и прописать роль: role="dialog".

    Далее важно создать вложенный блок с указанием класса

    class="modal-dialog"

  3. Заполнение модального окна контентом.

    И теперь мы перешли к последнему этапу. Создайте

    <div>

    и в него вносите текст сообщения. Обязательно реализуйте кнопку «Закрыть».

Закрепите теоретический материал разбором кода примера, прикрепленного ниже.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div>
  <button type="button" data-toggle="modal" data-target="#Modal">Открыть модальное окно</button>
 
  <div role="dialog">
    <div>
 
      <div>
        <div>
          <button type="button" data-dismiss="modal">&times;</button>
          <h5>Внимание!</h5>
        </div>
        <div>
          <p>Здесь написан некий важный текстовый контент!</p>
        </div>
        <div>
          <button type="button" data-dismiss="modal">Закрыть</button>
        </div>
      </div>
 
    </div>
  </div>
 
</div>

<div> <button type="button" data-toggle="modal" data-target="#Modal">Открыть модальное окно</button> <div role="dialog"> <div> <div> <div> <button type="button" data-dismiss="modal">&times;</button> <h5>Внимание!</h5> </div> <div> <p>Здесь написан некий важный текстовый контент!</p> </div> <div> <button type="button" data-dismiss="modal">Закрыть</button> </div> </div> </div> </div> </div>

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

С уважением, Роман Чуешов

Загрузка...

Прочитано: 411 раз

Модальное окно · Bootstrap на русском

Модальные окна Имеют обтекаемую форму, но гибкая, диалоговое окно с минимальным набором функций и по умолчанию.

Содержание

autofocus атрибут HTML не имеет никакого эффекта в Bootstrap модальные глаголы. для достижения такого же эффекта, использовать некоторые пользовательские JavaScript:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})
Открытие нескольких модальных окон не поддерживается

Не открывайте новое модальное окно пока другое всё ещё открыто. Отображение более одного модального окна требует написание дополнительного пользовательского кода.

Размещение разметки модального окна

Всегда старайтесь поместить разметку модального окна в верхнем уровне HTML-документа, чтобы избежать влияния других элементов на внешний вид модального окна и/или его функциональность.

Пример статического

Обработанную модальное окно Заголовок, тело, и набор действий в футере.

<div>
  <div role="document">
    <div>
      <div>
        <button type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h5>Modal title</h5>
      </div>
      <div>
        <p>One fine body&hellip;</p>
      </div>
      <div>
        <button type="button" data-dismiss="modal">Close</button>
        <button type="button">Save changes</button>
      </div>
    </div><!-- /.модальное окно-Содержание -->
  </div><!-- /.модальное окно-диалог -->
</div><!-- /.модальное окно -->

Демо

Переключить модальное окно через JavaScript нажав на кнопку ниже. Он будет скользить вниз и исчезают в верхней части страницы.

Текст в модальном окне

Моллис УДО, есть номера commodo предполагаемое luctus, ниси erat porttitor лигулы.

Информеры в модальном окне

Эта кнопка должна вызвать диалоговое окно по клику.

Подсказки в модальном окне

Эта ссылка и эта ссылка должна иметь подсказку при наведении.


Переполняя текст для отображения прокрутки;

Кра маттис миннеаполис пурус сидеть амет любого fermentum.. Одио хусто Кра, dapibus AC и это в, egestas егет квам. Морби Лео рисус, порта переменного тока миннеаполис переменного тока, преддверия на Эрос.

Praesent commodo курсус "магна", ООО "нисл" scelerisque миннеаполис эт. Vivamus sagittis lacus Вэл augue laoreet взгляд долор auctor faucibus.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Кра маттис миннеаполис пурус сидеть амет любого fermentum.. Одио хусто Кра, dapibus AC и это в, egestas егет квам. Морби Лео рисус, порта переменного тока миннеаполис переменного тока, преддверия на Эрос.

Praesent commodo курсус "магна", ООО "нисл" scelerisque миннеаполис эт. Vivamus sagittis lacus Вэл augue laoreet взгляд долор auctor faucibus.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Кра маттис миннеаполис пурус сидеть амет любого fermentum.. Одио хусто Кра, dapibus AC и это в, egestas егет квам. Морби Лео рисус, порта переменного тока миннеаполис переменного тока, преддверия на Эрос.

Praesent commodo курсус "магна", ООО "нисл" scelerisque миннеаполис эт. Vivamus sagittis lacus Вэл augue laoreet взгляд долор auctor faucibus.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Launch demo modal

<!-- Кнопка запуска модального окна -->
<button type="button" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Модальное окно -->
<div tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div role="document">
    <div>
      <div>
        <button type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h5>Modal title</h5>
      </div>
      <div>
        ...
      </div>
      <div>
        <button type="button" data-dismiss="modal">Close</button>
        <button type="button">Save changes</button>
      </div>
    </div>
  </div>
</div>
Сделать модальности можно

Не забудьте добавить role="dialog" и aria-labelledby="...", ссылаясь на модальное окно Заголовок, чтобы .modal, и role="document" к .modal-dialog сам.

Кроме того, вы можете дать описание вашего модальное окно диалог с aria-describedby на .modal.

Опционные размеры

Модальные окна Имеют два дополнительных размера, доступные через классы модификатор, который будет размещен на .modal-dialog. Эти размеры ударом в некоторые точки останова, чтобы избежать горизонтальной полосы прокрутки на узких окнах.

Large modal Small modal

<!-- Большие модальное окно -->
<button data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div>
    <div>
      ...
    </div>
  </div>
</div>

<!-- Небольшой модальное окно -->
<button type="button" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div>
    <div>
      ...
    </div>
  </div>
</div>

Удалить анимацию

Для модальности, которые просто появляются, а не исчезают, просмотреть, удалить .fade класс от модальное окно разметки.

<div tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true">
  ...
</div>

С помощью блочной системы

Чтобы воспользоваться преимуществами Bootstrap блочная система в модальное окно, просто гнездо .container-fluid В .modal-body, а затем использовать обычные блочная система классов внутри этого контейнера.

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-2 .col-md-offset-4

.col-md-6 .col-md-offset-3

Level 1: .col-sm-9

Level 2: .col-xs-8 .col-sm-6

Level 2: .col-xs-4 .col-sm-6

Launch demo modal

<div tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true">
  <div role="document">
    <div>
      <div>
        <button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h5>Modal title</h5>
      </div>
      <div>
        <div>
          <div>
            <div>.col-md-4</div>
            <div>.col-md-4 .col-md-offset-4</div>
          </div>
          <div>
            <div>.col-md-3 .col-md-offset-3</div>
            <div>.col-md-2 .col-md-offset-4</div>
          </div>
          <div>
            <div>.col-md-6 .col-md-offset-3</div>
          </div>
          <div>
            <div>
              Level 1: .col-sm-9
              <div>
                <div>
                  Level 2: .col-xs-8 .col-sm-6
                </div>
                <div>
                  Level 2: .col-xs-4 .col-sm-6
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <button type="button" data-dismiss="modal">Close</button>
        <button type="button">Save changes</button>
      </div>
    </div>
  </div>
</div>
<div>
  <button type="button" data-toggle="modal" data-target="#gridSystemModal">
    Launch demo modal
  </button>
</div>

Изменения модальное окно Контента, основанного на кнопку пуска

Есть куча кнопок, вызывает модальное окно, просто с немного разным содержанием? Используйте event.relatedTarget и HTML data-* атрибуты (возможно через jQuery) варьировать содержимым модального окна в зависимости от того, какая кнопка была нажата. См подробные сведения в документации Модальных событий relatedTarget.

Open modal for @mdo Open modal for @fat Open modal for @getbootstrap
<div>
  <button type="button" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
  <button type="button" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
  <button type="button" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
  <div tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div role="document">
      <div>
        <div>
          <button type="button" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h5>New message</h5>
        </div>
        <div>
          <form>
            <div>
              <label for="recipient-name">Recipient:</label>
              <input type="text">
            </div>
            <div>
              <label for="message-text">Message:</label>
              <textarea></textarea>
            </div>
          </form>
        </div>
        <div>
          <button type="button" data-dismiss="modal">Close</button>
          <button type="button">Send message</button>
        </div>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Кнопка, что спровоцировало модальное окно
  var recipient = button.data('whatever') // Извлечение информации из данных-* атрибутов
  // Если необходимо, вы могли бы начать здесь AJAX-запрос (и выполните обновление в обратного вызова).
  // Обновление модальное окно Контента. Мы будем использовать jQuery здесь, но вместо него можно использовать привязки данных библиотеки или других методов.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Модальные окна с динамической высоты

Если Высота модальное окно изменения во время ее открытия, Вам необходимо позвонить $('#myModal').data('bs.modal').handleUpdate() подрегулировать модальное окно’s позиции в случае появляется полоса прокрутки.

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

В модальное окно плагин переключает ваш скрытый Контент по требованию, через атрибуты данных или JavaScript. Он также добавляет .modal-open на <body> по умолчанию прокрутка поведение и создает .modal-backdrop, чтобы обеспечить щелкните область для увольнения показаны модальные глаголы при нажатии вне модальное окно.

С помощью данных атрибутов

Активируйте модальное окно без записи JavaScript. Набор data-toggle="modal" на элемент контроллера, кнопки, вместе с data-target="#foo" или href="#foo", чтобы предназначаться для определенного модальное окно для переключения.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Через JavaScript

Вызов модальное окно с кодом myModal С одной строки JavaScript:

$('#myModal').modal(options)

Варианты

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных, введите имя параметр data-, а на data-backdrop="".

Имя Тип По умолчанию Описание
backdrop boolean or the string 'static' true Включает в себя модальное окно-фон элемента. Кроме того, укажите static на фоне которого не закрыть модальное окно по щелчку.
keyboard boolean true Замыкает модальное окно При нажатии клавиши Escape
show boolean true Показывает модальное окно При инициализации.

Методы

.modal(options)

Активирует ваш Контент в модальное окно. Принимает необязательный варианты object.

$('#myModal').modal({
  keyboard: false
})
.modal('toggle')

Переключение вручную на модальное окно. Возвращает абоненту до модальное окно фактически было показано или скрыто (т. е. shown.bs.modal или hidden.bs.modal события).

$('#myModal').modal('toggle')
.modal('show')

Вручную открывает модальное окно. Возвращает абоненту до модальное окно фактически было показано (т. е. shown.bs.modal события).

$('#myModal').modal('show')
.modal('hide')

Вручную скрывает модальное окно. Возвращает абоненту до модальное окно На самом деле был скрытым (т. е. hidden.bs.modal события).

$('#myModal').modal('hide')

События

Bootstrap модальное окно класс предоставляет несколько событий для навески модальное окно функциональности. Все модальное окно события обстреляли модальное окно сама по себе (т. е. <div>).

Тип События Описание
show.bs.modal Это событие возникает сразу же, когда show способ экземпляра называется. Если вызываемое щелчком, щелчке элемент, как relatedTarget свойство события.
shown.bs.modal Это событие запускается, когда модальное окно стала видимой для пользователя (будет ждать CSS переходы для завершения). Если вызываемое щелчком, щелчке элемент как relatedTarget свойство события.
hide.bs.modal Это событие сразу же выполняется, когда вызывается экземпляр метода hide.
hidden.bs.modal Это событие запускается, когда модальное окно закончил быть скрыта от пользователя (будет ждать CSS переходы для завершения).
$('#myModal').on('hidden.bs.modal', function (e) {
  // сделать что-то...
})

Передать значение в модальное окно bootstrap? — Хабр Q&A

Приветствую всех.
Суть такова. JS я очень плохо знаю, так как только-только начинаю изучать, но реализовать задуманное очень хочется.

имеется код:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
        crossorigin="anonymous"></script>
    <title>магазин</title>
</head>

<body>

    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <img src="img/soft.jpg" alt="Товар">
                            <div>
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                                <div>
                                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when
                                    an
                                    unknown printer took a galley of type and scrambled it to make a type specimen
                                    book. It
                                    has
                                    survived not only five centuries, but also the leap into electronic typesetting,
                                    remaining
                                    essentially unchanged. It was popularised in the 1960s with the release of Letraset
                                    sheets
                                    containing Lorem Ipsum passages, and more recently with desktop publishing software
                                    like
                                    Aldus PageMaker including versions of Lorem Ipsum.
                                </div>
                            </div>
                            <div>
                                <button data-target="#toggle1" data-toggle="collapse" type="button">Подробнее</button>
                                <button type="button" data-toggle="modal" data-target="#modal_purchase_question">Купить</button>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>

        <!-- Модалка -->
        <div role="dialog">
            <div>
                <div>
                    <div>
                        <h5>Товар: unnamed</h5>
                        <button type="button" data-dismiss="modal">&times;</button>
                    </div>
                    <div>
                        <p>Вы уверены?</p>
                    </div>
                    <div>
                        <button type="button" data-dismiss="modal">Да</button>
                        <button type="button" data-dismiss="modal">Нет</button>
                    </div>
                </div>

            </div>
        </div>

    </div>
</body>

</html>

В данном примере у меня имеется блок с кнопкой купить, при нажатии на которую открывается окно с подтверждением.
Параметр каждый раз принимает значение выгружаемое из БД (в данном случает это значение 1 ). Так вот суть вопроса такая, как передать это значение в модальное окно (каким скриптом), которое появляется после нажатия на кнопку купить и отобразить его там?

буду очень благодарен какому-нибудь рабочему примеру и желательно с комментариями к нему...

Модальное окно. Компоненты · Bootstrap

Используйте модальный плагин Bootstrap для добавления диалогов на ваш сайт для лайтбоксов, уведомлений пользователей или полностью настраиваемого контента.

Как это работает

До того как начать работу с модальными компонентами Bootstrap, ознакомьтесь со следующей информацией, т.к. параметры недавно изменились.

  • Модальные окна сделаны на HTML, CSS и JavaScript. Они располагаются поверх всего документа и блокируют прокрутку тела документа <body>, вместо него прокручивая модальные окна
  • Клик вне модального элемента автоматически закрывает его.
  • Bootstrap позволяет активировать лишь один модальный элемент за раз. Вложенные модальные элементы не поддерживаются, т.к. мы думаем, что они принесли бы неудобства.
  • Модальные элементы имеют position: fixed, что может вызвать иногда их частичную отрисовку. Мы рекомендуем размещать модальные элементы на самом верху страницы, когда возможно, для избегания сбоев и влияния других элементов на корректную работу модальных элементов .modal.
  • Опять же – из-за position: fixed есть некоторые сложности при использовании их на мобильных устройствах. Смотри документацию поддержки в браузерах.
  • Из-за семантики HTML5 атрибут autofocus не работает с модальными элементами Bootstrap. Чтобы добиться такого же эффекта, используйте собственный JavaScript:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

Далее – использование и примеры.

Примеры

Модальные компоненты

Ниже – пример статичного модального компонента (это значит, что его position и display «преодолены»). В примере есть заголовок модального компонента, тело (требуется для padding), футер модального компонента (по желанию). Мы советуем включать заголовки с отклонением действия, когда возможно, или обеспечить другой явный путь отклонить действие.

Modal body text goes here.

<div tabindex="-1" role="dialog">
  <div role="document">
    <div>
      <div>
        <h5>Modal title</h5>
        <button type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div>
        <p>Modal body text goes here.</p>
      </div>
      <div>
        <button type="button" data-dismiss="modal">Close</button>
        <button type="button">Save changes</button>
      </div>
    </div>
  </div>
</div>

«Живое» демо

Изменяйте (скрывайте\показывайте) рабочий пример модального элемента по клику на кнопку ниже. Окно сползет вниз и возникнет в верху страницы.

Woohoo, you're reading this text in a modal!

Запустить модальное окно

<!-- Button trigger modal -->
<button type="button" data-toggle="modal" data-target="#exampleModal">
  Запустить модальное окно
</button>

<!-- Modal -->
<div tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div role="document">
    <div>
      <div>
        <h5>Modal title</h5>
        <button type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div>
        ...
      </div>
      <div>
        <button type="button" data-dismiss="modal">Close</button>
        <button type="button">Save changes</button>
      </div>
    </div>
  </div>
</div>

Прокрутка длинного содержимого

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

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Запустить модальное окно

<!-- Button trigger modal -->
<button type="button" data-toggle="modal" data-target="#exampleModalLong">
  Запустить модальное окно
</button>

<!-- Modal -->
<div tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div role="document">
    <div>
      <div>
        <h5>Modal title</h5>
        <button type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div>
        ...
      </div>
      <div>
        <button type="button" data-dismiss="modal">Close</button>
        <button type="button">Save changes</button>
      </div>
    </div>
  </div>
</div>

Вертикальное центрирование

Добавьте .modal-dialog-centered в .modal-dialog чтобы вертикально центрировать модальное окно.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Запустить модальное окно

<!-- Button trigger modal -->
<button type="button" data-toggle="modal" data-target="#exampleModalCenter">
  Запустить модальное окно
</button>

<!-- Modal -->
<div tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div role="document">
    <div>
      <div>
        <h5>Modal title</h5>
        <button type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div>
        ...
      </div>
      <div>
        <button type="button" data-dismiss="modal">Close</button>
        <button type="button">Save changes</button>
      </div>
    </div>
  </div>
</div>

Всплывающие подсказки и возникающие подсказки

Всплывающие подсказки и возникающие подсказки можно размещать как необходимо. Когда модальные элементы закрыты, любые всплывающие подсказки и возникающие подсказки внутри них также автоматически отменяются.

Popover in a modal

This button triggers a popover on click.


Tooltips in a modal

This link and that link have tooltips on hover.

Запустить модальное окно

<div>
  <h5>Popover in a modal</h5>
  <p>This <a href="#" role="button" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
  <hr>
  <h5>Tooltips in a modal</h5>
  <p><a href="#" title="Tooltip">This link</a> and <a href="#" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

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

Используйте систему сеток Bootstrap внутри модального элемента, расположив .container-fluid внутри .modal-body. После этого используйте обычную систему сеток обычным образом.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-auto

.col-md-2 .ml-auto

Level 1: .col-sm-9

Level 2: .col-8 .col-sm-6

Level 2: .col-4 .col-sm-6

Запустить модальное окно

<div>
  <div>
    <div>
      <div>.col-md-4</div>
      <div>.col-md-4 .ml-auto</div>
    </div>
    <div>
      <div>.col-md-3 .ml-auto</div>
      <div>.col-md-2 .ml-auto</div>
    </div>
    <div>
      <div>.col-md-6 .ml-auto</div>
    </div>
    <div>
      <div>
        Level 1: .col-sm-9
        <div>
          <div>
            Level 2: .col-8 .col-sm-6
          </div>
          <div>
            Level 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Комбинируйте содержимое модальных элементов

Есть много кнопок, которые все запускают один модальный элемент со слегка разным содержимым? Используйте event.relatedTarget и атрибуты data-* (возможно через jQuery) для изменения содержимого в зависимости от нажатой кнопки.

Ниже – пример демо с кодом HTML и JavaScript. Для информации по relatedTarget читайте инфо по событиям модальных элементов.

Open modal for @mdo Open modal for @fat Open modal for @getbootstrap
<button type="button" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<div tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div role="document">
    <div>
      <div>
        <h5>New message</h5>
        <button type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div>
        <form>
          <div>
            <label for="recipient-name">Recipient:</label>
            <input type="text">
          </div>
          <div>
            <label for="message-text">Message:</label>
            <textarea></textarea>
          </div>
        </form>
      </div>
      <div>
        <button type="button" data-dismiss="modal">Close</button>
        <button type="button">Send message</button>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Изменение анимации

Переменная $modal-fade-transform определяет состояние преобразования .modal-dialog перед анимацией постепенного появления, переменная $modal-show-transform определяет преобразование .modal-dialog в конце модального появления анимация.

Если вы хотите, например, анимацию увеличения, вы можете установить $modal-fade-transform: scale(.8).

Анимация при удалении

Для модальных элементов, которые возникают простым способом, а не появляются плавно, удалите из кода модального элемента класс .fade.

<div tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true">
  ...
</div>

Динамическая высота

Если высота модального элемента изменяется при его открытии, вам следует вызвать $('#myModal').modal('handleUpdate') для обновления позиции модального элемента в случае, если возникнет полоса прокрутки.

Доступность

Удостоверьтесь, что добавили в .modal role="dialog" и aria-labelledby="...", привязанные к названию модального элемента, и role="document" в .modal-dialog. Дополнительно вы можете описать диалог модального элемента атрибутом aria-describedby, добавленным в .modal.

Встраивание видео из YouTube

Встраивание видео в модальные элементы требует дополнительного JavaScript для запрета автоматического воспроизведения и т.д. Дополнительная информация здесь.

Дополнительные размеры

У модальных элементов есть два размера, доступных к изменению через классы-модификаторы, которые надо размещать в элементе .modal-dialog. Эти размеры включаются на определенных брейкпойнтах, чтобы избежать появления горизонтальных полос прокрутки на более узких зонах просмотра.

Размер Class Modal max-width
Маленький .modal-sm 300px
Стандартный None 500px
Большой .modal-lg 800px
Очень большой .modal-xl 1140px

Модаль по умолчанию без класса модификаторов составляет модал «среднего» “medium” размера.

Очень большое окно Большое модальное окно Малое модальное окно

<!-- Extra large modal -->
<button type="button" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>

<div tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
  <div>
    <div>
      ...
    </div>
  </div>
</div>

<!-- Large modal -->
<button type="button" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div>
    <div>
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div>
    <div>
      ...
    </div>
  </div>
</div>

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

Плагин модальных элементов переключает состояние вашего скрытого содержимого по требованию с помощью атрибутов или JavaScript. Он также добавляет в <body> класс .modal-open для преодоления поведения при прокрутке по умолчанию, и создает зону для клика вне модального элемента, нужную для закрытия открытых модальных элементов, класс .modal-backdrop.

Через атрибуты

Активируйте модальный элемент без JavaScript. Установите data-toggle="modal" в контролирующем элементе, таком как кнопка, наряду с data-target="#foo" или href="#foo", для обращения к функциональности “toggle” для частного модального элемента.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Через JavaScript

Вызовите модальный элемент с id=”myModal” одной строкой JavaScript:

$('#myModal').modal(options)

Параметры

Параметры можно передавать атрибутами или JavaScript. Для использования атрибутов добавьте имя параметра в data-, например data-backdrop="".

Название Тип По умолч. Описание
backdrop boolean or the string 'static' true Подключает модальный элемент с затемненным фоном. Еще – задает static для фона, который не закрывает модальный элемент по клику на фоне.
keyboard boolean true Закрывает модальный элемент по нажатию ESC.
focus boolean true Фокусируется на модальном элементе по инициализации.
show boolean true Показывает модальный элемент по инициализации.

Методы

Асинхронные методы и переходы

Все методы API асинхронны и запускают переход. Они возвращаются функции, вызвавшей их, с началом перехода, но до его конца. Плюс, вызов метода к компоненту, выполняющему переход, будет проигнорирован.

Смотрите документацию JavaScript

.modal(options)

Активирует содержимое как модальный элемент. Принимает object параметров.

$('#myModal').modal({
  keyboard: false
})
.modal('toggle')

Вручную изменяет состояние модального элемента. Возвращается к функции-вызову до того, как модальный элемент показан или скрыт. (т.е. до того, как произойдет событие shown.bs.modal или hidden.bs.modal).

$('#myModal').modal('toggle')
.modal('show')

Вручную открывает модальный элемент. Возвращается к функции-вызову до того, как модальный элемент показан. (т.е. до того, как произойдет событие shown.bs.modal).

$('#myModal').modal('show')
.modal('hide')

Вручную прячет модальный элемент. Возвращается к функции-вызову до того, как модальный элемент показан. (т.е. до того, как произойдет событие hidden.bs.modal).

$('#myModal').modal('hide')
.modal('handleUpdate')

Вручную обновляет позицию модального элемента, если высота его изменяется во время открытия (т.е. в случае возникновения полосы прокрутки).

$('#myModal').modal('handleUpdate')

.modal('dispose')

Уничтожает модальный элемент.

События

Модальный элемент в Bootstrap имеет несколько событий для встраивания в функциональность. Все события модальных элементов запускаются внутри самих элементов (т.е. в <div>).

Тип события Описание
show.bs.modal Это событие запускается немедленно, когда экземпляр метода show вызван. Если оно вызвано кликом, элемент, на который кликнули, доступен как свойство события relatedTarget.
shown.bs.modal Это событие запускается, когда модальный элемент сделан видимым юзеру (будет ждать завершения переходов CSS). Если оно вызвано кликом, элемент, на который кликнули, доступен как свойство события relatedTarget.
hide.bs.modal Это событие запускается немедленно, когда экземпляр метода hide вызван.
hidden.bs.modal Это событие запускается, когда модальный элемент больше не является скрытым (будет ждать завершения переходов CSS).
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Модальное окно - внешний файл *.html, такое возможно в Bootstrap? — Хабр Q&A

Есть модальное окно. Можно ли его подключить из другого файла *.html.?
Например:

модальное окно под именем sing.html

<!DOCTYPE html>
<html lang="ru-UA">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Вход на сайт</title>

    <!-- Bootstrap -->
    <link href="css/mystyle.css" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet">
    <!-- font awesom shrift -->
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
      <body>
    
       <!-- HTML-код модального окна -->
<div>
  <div>
    <div>
      <!-- Заголовок модального окна -->
      <div>
        <button type="button" data-dismiss="modal" aria-hidden="true">×</button>
        <h5>Хотите получать больше информации? Авторизируйтесь.</h5>
      </div>
      <!-- Основное содержимое модального окна -->
      <div>
        
        <form role="form">
  <div>
    <label for="inputEmail">Адрес email:</label>
    <div>
      <input type="email" name="mail" placeholder="Введите email" required>
    </div>
  </div>
  <div>
    <label for="inputPassword">Пароль:</label>
    <div>
      <input type="password" name="password" placeholder="Введите пароль" required>
    </div>
  </div>
  <div>
    <div>
      <div>
        <label><input type="checkbox"> Запомнить</label>
      </div>
    </div>
  </div>
</form>
      </div>
      <!-- Футер модального окна -->
      <div>
       <button type="submit">Регистрация</button>
        <button type="submit">Войти</button>
      </div>
    
  </div>
</div>
    </div>
 
    
</body>
    </head>
</html>

Должно вызваться по такой конструкции.
<button type="button"><a href="sing.html"  data-target="#myModalBox" data-toggle="modal"  >Войти</a></button>

Но не вызывается. Можно ли так сделать, а если нет то как тогда люди поступают?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *