Приветствую всех постоянных читателей и гостей моего блога. Сегодня я хочу разобрать с вами, что такое модальное окно Bootstrap 3. Поэтому в текущей статье речь пойдет о плагине фреймворка под названием Modal Plugin.
Я расскажу вам, как создаются такие виды окон, какие инструменты для этого используются, а также на конкретном примере покажу, как реализовать диалоговое окно с формой регистрации по центру экрана. Ну а теперь давайте приступать к обучению!
Все полезное о Modal Plugin
Данный плагин очень прост в изучении и при этом довольно часто используется на сайтах, в том числе написанных на таких популярных движках, как Joomla!, WordPress, uCoz и других.
Для начала работы с инструментом фреймворка вам необходимо будет скачать текущую версию последнего (сейчас это 3.3.7) или воспользоваться CDN. При этом если вам в программе нужен только изучаемый плагин, то можно подключить файл modal.js.
Ну а теперь переместимся, собственно, к нашим баранам. Итак, модальное окно – это всплывающее диалоговое окошко, в котором расположена дополнительная информация или некие элементы управления (как, например, регистрационная форма).
Для полноценного управления текущим инструментом стоит знать основные встроенные классы.
Класс | Описание |
.modal | Создает блок модального окна. |
.modal-header | Определяет стиль заголовка. |
.modal-body | Определяет внешний вид основной части. |
.modal-footer | Определяет стиль «подвала». |
.modal-content | Включает в себя предыдущие три класса. Отвечает за все стилевые правила и наполненность диалогового окошка. |
.fade | Добавляет к инструменту анимационные эффекты при его открытии и закрытии. |
Чтобы заработал сам механизм, обязательно нужно в программный код добавить несколько атрибутов.
Так, для того чтобы вызвать конкретное модальное окно через какой-то элемент управления, например, кнопку, нужно создать триггер этого элемента. «Что это такое и как выглядит?» — спросите вы. И я с удовольствием отвечу!
В качестве наглядного примера создадим триггер кнопки и ссылки. Для этого необходимо добавить атрибуты data-toggle со значением «modal» и после data-target (для ссылок стоит использовать href) с именем Modal-элемента.
<button type="button" data-toggle="modal" data-target="#Mod1">Начать регистрацию </button>
<a data-toggle="modal" href="#Mod1"> Начать регистрацию</a>
Помимо перечисленных инструментов управления плагином существуют еще и методы с опциями.
Метод | Предназначение |
.modal (option) | Активизирует дополнительные опции, в которые входят:
· Show – отображает всплывающее окно; · Backdrop – устанавливает затемненный задний фон; · Keyboard – включает возможность закрытия модального окна с помощью клавиши Esc (но для начала нужно нажать Tab, чтобы последнее было в фокусе). |
.modal («toggle») | Активизирует функцию открытия/закрытия объекта. |
.modal («hide») | Скрывает элемент фреймворка. |
.modal («show») | Показывает его. |
Программируем форму регистрации
Теперь с полученными теоретическими знаниями вы легко сможете создать форму регистрации в модальном окне. В своем приложении я реализовал основные поля ввода персональной информации и предусмотрел кнопки закрытия, а также ссылку на авторизацию.
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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | <!DOCTYPE html> <html> <head> <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> <style> .btn { background-color: #00E5EE !important; } .modal-header, h4, .close { background-color: #00E5EE; text-align: center; font-size: 30px; color: #fff !important; } .modal-footer { background-color: #BFEFFF; } </style> </head> <body> <div class="container"> <h2>Вы хотите зарегистрироваться?</h2> <button type="button" class="btn btn-default btn-lg" id="Btn1">Регистрация</button> <div class="modal fade" id="Modal1" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header" style="padding:35px 50px;"> <button type="button" class="close" data-dismiss="modal">×</button> <h4><span class="glyphicon glyphicon-lock"></span> Регистрация</h4> </div> <div class="modal-body" style="padding:40px 50px;"> <form role="form"> <div class="form-group"> <label for="usrname"><span class="glyphicon glyphicon-user"></span> Логин</label> <input type="text" class="form-control" id="usrname" placeholder="Введите логин"> </div> <div class="form-group"> <label for="email"><span class="glyphicon glyphicon-envelope"></span> Email</label> <input type="email" class="form-control" id="email" placeholder="Введите email"> </div> <div class="form-group"> <label for="psw1"><span class="glyphicon glyphicon-eye-open"></span> Пароль</label> <input type="password" class="form-control" id="psw1" placeholder="Ввведите пароль"> <br/> <input type="password" class="form-control" id="psw2" placeholder="Повтор пароля"> </div> <button type="submit" class="btn btn-success btn-block" ><span class="glyphicon glyphicon-off"></span> Зарегистрироваться</button> </form> </div> <div class="modal-footer"> <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button> <p>Уже есть аккаунт? <a href="#">Авторизация</a></p> </div> </div> </div> </div> </div> <script> $(document).ready(function(){ $("#Btn1").click(function(){ $("#Modal1").modal(); }); }); </script> </body> </html> |
На этой прекрасной ноте я прощаюсь с вами. Буду рад видеть вас в группе моих верных подписчиков! Не забывайте делиться ссылками на мой блог с друзьями и знакомыми. До новых встреч! Пока-пока!
С уважением, Роман Чуешов
Хорошие статьи. Добавляю в заметки ).