Bootstrap login form - examples & tutorial

Компонент CreateOwner

В папке , а затем внутри папки создайте новую папку и назовите ее . Внутри создайте новый файл .

Приступим к редактированию этого файла:

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

Давайте добавим еще одну строку кода между блоками и :

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

Внутри папки создайте новый файл . Измените этот файл, добавив функцию преобразования объекта:

Теперь нам нужно импортировать эту функцию в файл :

У нас будет больше действий внутри файла , поэтому мы импортируем все эти действия в компонент .

Мы заполнили , поэтому давайте воспользуемся им для отправки всех свойств компоненту .

Объект конфигурации элементов формы

Давайте добавим этот код в тег :

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

Чтобы увидеть результат наших текущих действий, давайте изменим файл , добавив другой маршрут к компоненту ниже маршрута . Не следует забывать и об операторе импорта:

Если мы перейдем на страницу , мы увидим такой результат:

Мы создали элементы управления, но пока ничего не можем с ними сделать. Но как только мы реализуем функцию , мы сможем изменять и проверять наши входные данные.

ЕЩЁ

Полноэкранное видеоМодальное окноШкала времениИндикатор прокрутки Индикатор выполненияПанель навыковПолзунок диапазонаПодсказки при наведенииВсплывающие окнаСкладная секцияКалендарьВключить HTMLСписок делЗагрузчикиЗвездный рейтингПользовательский рейтингНаложениеКонтактные чипыКарточкиФлип-картаКарточка профиляКарточка товараОкно тревогиВыноска сообщенияПримечаниеМеткиКругиHR Горизонтальная линияКупонГруппа списковОтзывчивый текстВырезанный текстСветящийся текстФиксированный подвалЛипкий элементРавная высота столбцовОчистка поплавкаОтзывчивые поплавкиСнэк-бар/тостПолноэкранное режимЧертеж при прокруткеПлавная прокруткаГрадиент фонаЛипкий заголовокИзменить заголовок при прокруткеОтзывчивые столбцы ценПараллаксСоотношение сторонПереключатель нравится/не нравитсяПереключатель скрыть/показатьПереключаель текстаПереключатель классаДобавить классУдалить классАктивный классДревовидное представлениеУдалить свойствоАвтономный режим обнаруженияСделать скрытый элементПеренаправление веб страницыУвеличить при наведенииФлип-боксЭлемент вертикально по центруПереход при наведении курсораСтрелкиФигурыСсылка для скачиванияПолная высота элементаОкно браузераПользовательская полоса прокруткиРазличные устройстваЦвет заполнителяЦвет выделения текстаЦвет макераВертикальная линияАнимированные иконкиТаймер обратного отсчетаПишущая машинкаСтраница заставкиСообщение чатаВсплывающее окно чатаРазделенный экранРекомендацииСчетчик разделаСлайд-шоу цитатЗакрываемые злементы спискаТипичные точки прерыванияПеретаскиваемый HTML элементМедиа запросы JSПодсветка синтаксисаJS анимацииПолучить элементы Iframe

Дизайн: Структура страницы

Ниже приведен код HTML страницы, в которой подключаются необходимые файлы CSS и JS:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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">
</head>
<body>
 
<!-- Здесь будет модальное окно ... --> 
 
<!-- Здесь помещаются JS файлы. -->
<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>

</body>
</html>

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

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

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

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

Параметры

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

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

Методы

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

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

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

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

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

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

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

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

События

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

Тип события	Описание
show.bs.modal	Это событие запускается немедленно, когда экземпляр метода вызван. Если оно вызвано кликом, элемент, на который кликнули, доступен как свойство события .
shown.bs.modal	Это событие запускается, когда модальный элемент сделан видимым юзеру (будет ждать завершения переходов CSS). Если оно вызвано кликом, элемент, на который кликнули, доступен как свойство события .
hide.bs.modal	Это событие запускается немедленно, когда экземпляр метода вызван.
hidden.bs.modal	Это событие запускается, когда модальный элемент больше не является скрытым (будет ждать завершения переходов CSS).

Модальные окна авторизации и регистрации — jQuery

$(function(){

    //При загрузке страницы ссылкам форм подменяем атрибут href и добавляем data-атрибут для вызова модальных окон
    $('#modal-login a').attr('href','#modal-register').attr('data-uk-modal','');
    $('#modal-login a').attr('href','#modal-forgot-password').attr('data-uk-modal','');
    $('#modal-forgot-password a').attr('href','#modal-login').attr('data-uk-modal','');
    $('#modal-register a').attr('href','#modal-login').attr('data-uk-modal','');

    //Обработчик формы авторизации
    $('#modal-login').on('submit','form',function(){

        var form_action = $(this).attr('action');
        var form_backurl = $(this).find('input').val();

        $.ajax({
            type: "POST",
            url: '/bitrix/templates/.default/ajax/auth.php',
            data: $(this).serialize(),
            timeout: 3000,
            error: function(request,error) {
                if (error == "timeout") {
                    alert('timeout');
                }
                else {
                    alert('Error! Please try again!');
                }
            },
            success: function(data) {
                $('#modal-login .modal-content').html(data);

                $('#modal-login form').attr('action',form_action);
                $('#modal-login input').val(form_backurl);

                $('#modal-login a').attr('href','#modal-register').attr('data-uk-modal','');
                $('#modal-login a').attr('href','#modal-forgot-password').attr('data-uk-modal','');
            }
        });

        return false;
    });

    //Обработчик формы регистрации
    $('#modal-register').on('submit','form',function(){

        var form_action = $(this).attr('action');
        var form_backurl = $(this).find('input').val();

        $.ajax({
            type: "POST",
            url: '/bitrix/templates/.default/ajax/auth.php',
            data: $(this).serialize(),
            timeout: 3000,
            error: function(request,error) {
                if (error == "timeout") {
                    alert('timeout');
                }
                else {
                    alert('Error! Please try again!');
                }
            },
            success: function(data) {
                $('#modal-register .modal-content').html(data);
                $('#modal-register form').attr('action',form_action);
                $('#modal-register input').val(form_backurl);
                $('#modal-register a').attr('href','#modal-login').attr('data-uk-modal','');
            }
        });

        return false;
    });

    //Обработчик формы восстановления пароля
    $('#modal-forgot-password').on('submit','form',function(){

        var form_action = $(this).attr('action');
        var form_backurl = $(this).find('input').val();

        $.ajax({
            type: "POST",
            url: '/bitrix/templates/.default/ajax/auth.php',
            data: $(this).serialize(),
            timeout: 3000,
            error: function(request,error) {
                if (error == "timeout") {
                    alert('timeout');
                }
                else {
                    alert('Error! Please try again!');
                }
            },
            success: function(data) {
                $('#modal-forgot-password .modal-content').html(data);
                $('#modal-forgot-password form').attr('action',form_action);
                $('#modal-forgot-password input').val(form_backurl);
                $('#modal-forgot-password a').attr('href','#modal-login').attr('data-uk-modal','');
            }
        });

        return false;
    });

});

С помощью jQuery подменяем атрибуты «href» ссылок для вызова модальных окон.
Атрибут «action» у всех форм от текущей открытой страницы сайта, иначе подставится путь до файла вот такой «/bitrix/templates/.default/ajax/auth.php» и не будет работать форма корректно.
Также заменяем значение скрытого инпута «backurl», который будет возвращать нас после перезагрузки страницы туда, откуда пришли, т.е. на текущую страницу.
Ошибки ajax я не оформлял для этого примера, попробуйте сами оформить, как захочется в методе error: function(request,error) {…}
В методе success: function(data) {…} ajax вернет HTML-код формы, здесь надо опять подменить все «href» атрибуты у ссылок и атрибут «action» у формы.

Минимум, что необходимо сделать на вашем сайте — это как-то вызвать форму авторизации, пример для uikit

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

Панель иконокЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полностраничныеВкладки при наведенииВерхняя навигацияОтзывчивый верхний навигаторНавигация с иконкамиМеню поискаСтрока поискаФиксированная боковая панельАнимированные боковые панелиОтзывчивая боковая панельПолноэкранная навигация наложенияМеню Off-CanvasБоковые кнопки навигацииБоковая панель с иконкамиМеню с горизонтальной прокруткойВертикальное менюНижняя навигацияОтзывчивая нижняя навигацияГраницы навигацииМеню по правому краюСсылка меню по центруМеню равной шириныФиксированное менюСкольжение вниз по полосе прокруткиСкрыть меню при прокруткеУменьшить меню при прокруткеЛипкая навигацияНавигация на изображенияВыпадающее менюВыпадающий при кликеВыпадающее меню в навигацииВыпадающий список в боковой навигацииОтзывчивая навигация с выпадающимПодменю навигацияВсплывающее менюМега менюМобильное менюМеню занавесСвернуть боковой барСвернуть боковую панельПагинацияХлебные крошкиГруппа кнопокГруппа вертикальных кнопокЛипкий социальный барНавигация таблеткиОтзывчивый заголовок

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

Для создания модального окна (thickbox) нужно сделать две вещи:

Подключить скрипт ThickBox в PHP, вызвав функцию add_thickbox().
Добавить в HTML ссылку (тег <a>), которая будет открывать модальное окно. Ссылка должна иметь:
- Класс thickbox: .
- В URL (атрибут href) нужно добавить дополнительные параметры запроса.

Параметры модального окна

Параметры запроса, которые добавляются в атрибут href ссылки открывающей модальное окно:

width
Ширина модального окна в пикселях.
height
Высота модального окна в пикселях.
TB_iframe

Указываем этот параметр и ставим ему значение true, если нужно загрузить контент указанной в URL ссылки в iframe. Т.е. URL будет выглядеть так: . Так контент http://example.com будем показан в модальном окне, в iframe.
В этом случае не нужно создавать сам элемент модального окна в HTML текущей страницы. ВП сделает все автоматом.

TB_inline

При использовании этого параметра вместо TB_iframe модальное окно покажет заранее созданный HTML элемент с id атрибутом указанным в параметре . Т.е

URL должен выглядеть так: .
В этом случае нужно создать DIV элемент с .

Контент модального окна

Важно чтобы контент внутри элемента находился внутри другого элемента. Выше это тег

.
Так неправильно:

Контент модального окна

Примеры создания модальных окон

#1 inline модальное окно, контент которого берется из текущей страницы

<?php add_thickbox(); ?>

<div id="my-modal-id" style="display:none;">
	 <p>
		  Контент модального окна.
	 </p>
</div>

<a href="/?TB_inline&width=600&height=550&inlineId=my-modal-id" class="thickbox">Открыть модальное окно</a>

В результате получим такое модальное окно

#2 iframe модальное окно, контент которого берется по указанному URL

<?php add_thickbox(); ?>

<a href="http://example.com?TB_iframe=true&width=600&height=550" class="thickbox">Открыть модальное окно</a>

#3 Вызов модального окна через JS функцию

Допустим, мы хотим использовать inline модальное окно, но контент этого окна заменять через AJAX. К сожалению, в API нет события когда модальное окно показывается (оно есть для iframe варианта, то не для inline).

Мы можем использовать JS функцию , она входит в состав апи.

Пример:

<?php add_thickbox(); ?>

<div id="my-modal-id" style="display:none;">
	 <p>
		  Контент модального окна.
	 </p>
</div>

<a href="#" class="modal-init-js" onclick="return window.eduResModalShow(this);">Открыть модальное окно</a>

И теперь дополняющий JS код, где используется tb_show() и создается AJAX запрос.

jQuery(document).ready(function($){

	var $modal = $('#my-modal-id');
	var $modalCont = $modal.find('>*');

	// шаг 1 - показ модального окна и выбор объкта редактирвоания
	window.eduResModalShow = function(that){

		tb_show( 'Заголовок модального окна', '/?TB_inline&inlineId=my-modal-id&width=700&height=500' );

		// AJAX запрос для загрузки контента окна
		$modalCont.html('загружаю...');
		ajaxs( 'edu_results_modal_html', { user_id: 5 }, function(html){
			$modalCont.html(html);
		});

		return false; // для ссылки
	}

});

Заметки

JS код находится в файле

HTML код который создается автоматически

<div id='TB_title'>
	<div id='TB_ajaxWindowTitle'>Заголовок</div>
	<div id='TB_closeAjaxWindow'>
		<button type='button' id='TB_closeWindowButton'><span class='tb-close-icon'></span></button>
	</div>
</div>

<div id='TB_ajaxContent'></div>

Триггером модального окна может быть

HTML тег: <a>, <area> и <input>. Для инициализации каждый тег должен иметь class=»thickbox».

Для <a> URL и параметры указываются в атрибуте href. Для <area> и <input> в атрибуте alt.

// удалено
jQuery( 'body' ).trigger( 'thickbox:removed' );

// закрыто
jQuery( '#TB_window' ).trigger( 'tb_unload' )

// загружено
jQuery( '#TB_window' ).trigger( 'thickbox:iframe:loaded' );

Расширение функционала

Сейчас в моём модальном окне 149 строк кода если считать с пробелами. Но в конечном счёте, в моём проекте оно выросло до 367 строк и я рад этому. В начале моего проекта мне нужно было просто модальное окно. Но потом мне понадобилось загружать в него форму с contact form 7 по ajax, так же и отправлять данные, валидировать форму, переводить форму на 2 языка, проверять куки. И с XMC (название моего модального окна) это очень просто, потому что ты не ищешь элементы, ты не назначаешь множество переменных у тебя всё храниться внутри объекта и ты имеешь доступ к его данным. Вот например как я сделал ajax-запрос формы:

XMC.prototype.ajax = function () {
    var mf = this;
    var data = new Object();
    data = JSON.stringify(data);
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if(this.readyState == 4 && this.status == 200){
            mf.body.innerHTML = this.responseText;
            mf.form = mf.body.firstChild;
            mf.form = mf.form.querySelector('form');
            mf.form.setAttribute('action', '#wpcf7-f41-o1');

            var el = document.createElement('div');
            el.id = 'wpcf7-f41-o1';
            mf.body.appendChild(el);
			
			if(window.screen.width < '758'){
				var submit = mf.form.querySelector('input');
				mf.btnClose.classList.add('btn');
				mf.btnClose.setAttribute('type', 'button');
				mf.btnClose.classList.add('btn-warning');
				mf.btnClose.classList.add('rounded-circle');			
				submit.insertAdjacentElement('afterend', mf.btnClose);
			}
            mf.sendClickDelegate(mf.form);
            mf.i18n();
        }
    };
    xhttp.open('POST', localizationPreloader.adminUrl + "?action=fgb_modal_one_form", true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.send("data="+data);
    return this;
};

this.body — это основной блок «модалки», в которую по ajax подгружаю форму. А сам ajax я вызываю initBackground() в условии если задний слой равен null. Этим я достигаю того, что ajax формы делается один раз, а не каждый раз как происходит нажатие.

Поддержи Xakplant

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

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

Модальные окна по умолчанию имеют средний размер. Вы можете указать маленький или большой размер при необходимости.

Маленькое окно

Для маленького модального диалогового окна, добавьте класс .modal-sm к .modal-dialog.

Большое окно

Для большого модального диалогового окна добавьте класс .modal-lg к .modal-dialog.

HTML и CSS код модального окна

HTML разметка модального окна:

<div id="openModal" class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">Название</h3>
        <a href="#close" title="Close" class="close">×</a>
      </div>
      <div class="modal-body">    
        <p>Содержимое модального окна...</p>
      </div>
    </div>
  </div>
</div>

Ссылка, с помощью которой осуществляется открытие модального окна:

<!-- openModal - id модального окна (элемента div) -->
<a href="#openModal">Открыть модальное окно</a>

CSS модального окна:

/* стилизация содержимого страницы */
body {
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #292b2c;
    background-color: #fff;
} 
  
/* свойства модального окна по умолчанию */
.modal {
    position: fixed; /* фиксированное положение */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.5); /* цвет фона */
    z-index: 1050;
    opacity: 0; /* по умолчанию модальное окно прозрачно */
    -webkit-transition: opacity 200ms ease-in; 
    -moz-transition: opacity 200ms ease-in;
    transition: opacity 200ms ease-in; /* анимация перехода */
    pointer-events: none; /* элемент невидим для событий мыши */
    margin: 0;
    padding: 0;
}
/* при отображении модального окно */
.modal:target {
    opacity: 1; /* делаем окно видимым */
	  pointer-events: auto; /* элемент видим для событий мыши */
    overflow-y: auto; /* добавляем прокрутку по y, когда элемент не помещается на страницу */
}
/* ширина модального окна и его отступы от экрана */
.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
}
@media (min-width: 576px) {
  .modal-dialog {
      max-width: 500px;
      margin: 30px auto; /* для отображения модального окна по центру */
  }
}
/* свойства для блока, содержащего контент модального окна */ 
.modal-content {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3rem;
    outline: 0;
}
@media (min-width: 768px) {
  .modal-content {
      -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
      box-shadow: 0 5px 15px rgba(0,0,0,.5);
  }
}
/* свойства для заголовка модального окна */
.modal-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #eceeef;
}
.modal-title {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 1.25rem;
    font-weight: 500;
}
/* свойства для кнопки "Закрыть" */
.close {
    float: right;
    font-family: sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
    text-decoration: none;
}
/* свойства для кнопки "Закрыть" при нахождении её в фокусе или наведении */
.close:focus, .close:hover {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: .75;
}
/* свойства для блока, содержащего основное содержимое окна */
.modal-body {
  position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 15px;
    overflow: auto;
}

Если вам необходимо убрать скролл страницы после отображения модального окна, то к элементу нужно добавить CSS-свойство со значением . А после скрытия модального окна данное свойство убрать у элемента . Данное действие можно осуществить только с помощью JavaScript:

document.addEventListener("DOMContentLoaded", function(){
  var scrollbar = document.body.clientWidth - window.innerWidth + 'px';
  console.log(scrollbar);
  document.querySelector('').addEventListener('click',function(){
    document.body.style.overflow = 'hidden';
    document.querySelector('#openModal').style.marginLeft = scrollbar;
  });
  document.querySelector('').addEventListener('click',function(){
    document.body.style.overflow = 'visible';
    document.querySelector('#openModal').style.marginLeft = '0px';
  });
});

События

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

Мероприятие	Описание	пример
show.bs.modal	Откроется после вызова метода show.	$('#identifier').on('show.bs.modal', function () { // сделать кое-что… })
shown.bs.modal	Возникает, когда модальное окно было сделано видимым для пользователя (будет ждать CSS переходы для завершения).	$('#identifier').on('shown.bs.modal', function () { // сделать кое-что… })
hide.bs.modal	Возникает, когда метод hide экземпляра был вызван.	$('#identifier').on('hide.bs.modal', function () { // сделать кое-что… })
hidden.bs.modal	Возникает, когда модальное окно было скрыто от пользователя.	$('#identifier').on('hidden.bs.modal', function () { // сделать кое-что… })

Пример

Следующий пример демонстрирует использование событий:

<h2>Пример использования событий модального плагина</h2>

<!-- Кнопка модального триггера -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Запуск демо
</button>

<!-- 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">
               ×
            </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>
            
            <button type = "button" class = "btn btn-primary">
               Внести изменения
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
   
</div><!-- /.modal -->

<script>
   $(function () { $('#myModal').modal('hide')})});
</script>

<script>
   $(function () { $('#myModal').on('hide.bs.modal', function () {
      alert('Эй, я слышал, ты любишь модалы...');})
   });
</script>

Как видно на приведенном выше экране, если нажать на кнопку Close, т.е. событие hide, отображается предупреждающее сообщение.

ФОРМЫ

Форма входаФорма регистрацииФорма оформления заказаКонтактная формаФорма входа в соц сетиРегистрацияФорма с иконкамиРассылка по почтеСложенная формаАдаптивная формаФорма всплывающаяФорма линейнаяОчистить поле вводаКопирование текста в буфер обменаАнимированный поискКнопка поискаПолноэкранный поискПоле ввода в менюФорма входа в менюПользовательский флажок/радиоПользовательский выборТумблер перключательУстановить флажокОпределить Caps LockКнопка запуска на EnterПроверка пароляПереключение видимости пароляМногоступенчатая формаФункция автозаполнения

Make use of Bootstrap’s modal more monkey-friendly.

Monkeys love the , but they’re getting angry because they have to write this stuff:

<div class="modal fade">  <div class="modal-dialog">    <div class="modal-content">      <div class="modal-header">        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>        <h4 class="modal-title">Modal title</h4>      </div>      <div class="modal-body">        <p>One fine body…</p>      </div>      <div class="modal-footer">        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>        <button type="button" class="btn btn-primary">Save changes</button>      </div>    </div><!-- /.modal-content -->  </div><!-- /.modal-dialog --></div><!-- /.modal -->

What they want is more like this:

BootstrapDialog.alert(‘I want banana!’);

Like it? See or try more below.

Yii2 basic авторизация через БД во всплывающем (модальном) окне

Шаг 1

Для реализации авторизации Yii2 basic во всплывающем окне я возьму ранее написанный пример с авторизацией из БД: Yii2 basic, авторизация и регистрация через БД. Для этого клонируем его и подготавливаем:

mkdir yii2-auth-in-modal.local
cd yii2-auth-in-modal.local
git clone https://github.com/egor/yii2-basic-auth-through-db.git .
composer update

Настраиваем соединение с БД и запускаем миграцию:

yii migrate

Шаг 2

Создаем каталог для хранения виджтов app/widgets и каталог для представлений (view) виджетов app/widgets/views.

Создаем виджет LoginFormWidget для отображения модального окна с формой авторизации, app/widgets/LoginFormWidget.php:

<?php

namespace app\widgets;

use Yii;
use yii\base\Widget;
use app\models\LoginForm;

class LoginFormWidget extends Widget {

    public function run() {
        if (Yii::$app->user->isGuest) {
            $model = new LoginForm();
            return $this->render('loginFormWidget', );
        } else {
            return ;
        }
    }

}

В представление (view) виджета LoginFormWidget добавляем модально окно с формой авторизации,
app/widgets/views/loginFormWidget.php:

<?php

use yii\helpers\Html;
use yii\bootstrap\ActiveForm;
use yii\bootstrap\Modal;

Modal::begin([
    'header'=>'<h4>Login</h4>',
    'id'=>'login-modal',
]);
?>

    <p>Please fill out the following fields to login:</p>

<?php $form = ActiveForm::begin([
    'id' => 'login-form',
    'enableAjaxValidation' => true,
    'action' => ['site/ajax-login']
]);
echo $form->field($model, 'email')->textInput();
echo $form->field($model, 'password')->passwordInput();
echo $form->field($model, 'rememberMe')->checkbox();
?>

<div>
    If you forgot your password you can <?= Html::a('reset it', ['site/request-password-reset']) ?>.
</div>
<div class="form-group">
    <div class="text-right">

        <?php
        echo Html::button('Cancel', );
        echo Html::submitButton('Login', ); 
        ?>

    </div>
</div>

<?php 
ActiveForm::end();
Modal::end();

Шаг 3

Добавляем ajax действие проверки и авторизации пользователя в контроллер Site, app/controllers/SiteController.php:

public function actionAjaxLogin() {
    if (Yii::$app->request->isAjax) {
        $model = new LoginForm();
        if ($model->load(Yii::$app->request->post())) {
            if ($model->login()) {
                return $this->goBack();
            } else {
                Yii::$app->response->format = yii\web\Response::FORMAT_JSON;
                return \yii\widgets\ActiveForm::validate($model);
            }
        }
    } else {
        throw new HttpException(404 ,'Page not found');
    }
}

Шаг 4

В главном макете app/views/layouts/main.php в блок добавляем виджет LoginFormWidget:

use app\widgets\LoginFormWidget;

Вызов виджета LoginFormWidget, вставляем после :

<?= (Yii::$app->user->isGuest ? LoginFormWidget::widget([]) : ''); ?>

Заменим ссылку ведущую на страницу авторизации для вызов модального окна, с:

$menuItems[] = ['label' => 'Login', 'url' => ['/site/login']];

Меняем на:

$menuItems[] = ];

В итоге app/views/layouts/main.php примет вид:

<?php

/* @var $this \yii\web\View */
/* @var $content string */

use yii\helpers\Html;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use yii\widgets\Breadcrumbs;
use app\assets\AppAsset;
use app\widgets\LoginFormWidget;

AppAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
    <meta charset="<?= Yii::$app->charset ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?= Html::csrfMetaTags() ?>
    <title><?= Html::encode($this->title) ?></title>
    <?php $this->head() ?>
</head>
<body>
<?php $this->beginBody() ?>
<?php if (Yii::$app->user->isGuest) { echo LoginFormWidget::widget([]); } ?>
<div class="wrap">
    <?php
    NavBar::begin(,
    ]);
    $menuItems = [
        ['label' => 'Home', 'url' => ['/site/index']],
        ['label' => 'About', 'url' => ['/site/about']],
        ['label' => 'Contact', 'url' => ['/site/contact']],
    ];
    if (Yii::$app->user->isGuest) {
        $menuItems[] = ['label' => 'Signup', 'url' => ['/site/signup']];
        $menuItems[] = ];
    } else {
        $menuItems[] = '<li>'
            . Html::beginForm(['/site/logout'], 'post')
            . Html::submitButton(
                'Logout (' . Yii::$app->user->identity->username . ')',
                
            )
            . Html::endForm()
            . '</li>';
    }
    echo Nav::widget(,
        'items' => $menuItems,
    ]);
    NavBar::end();
    ?>

    <div class="container">
        <?= Breadcrumbs::widget() ? $this->params : [],
        ]) ?>
        <?= $content ?>
    </div>
</div>

<footer class="footer">
    <div class="container">
        <p class="pull-left"> My Company <?= date('Y') ?></p>
        <p class="pull-right"><?= Yii::powered() ?></p>
    </div>
</footer>

<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>

Сохраняем и запускаем.