Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать в интернете на создании сайтов и блогов

Модальное окно на bootstrap 3 или пошагово создаем всплывающую форму регистрации

Приветствую всех постоянных читателей и гостей моего блога. Сегодня я хочу разобрать с вами, что такое модальное окно 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">&times;</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>

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

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

Прочитано: 1053 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o:
  • Константин

    Хорошие статьи. Добавляю в заметки ).

    02.06.2018 в 18:45