Создаем простое модальное окно с фоновым изображением и формой
Использование модальных окон ограничивается лишь вашей фантазией. Оно может содержать любые данные: навигацию, поиск, форму регистрации или входа, таблицы, слайдеры и так далее. Этот пример основан на разметке полноэкранного модального окна из компонента Модальные окна и вставляем в него форму с фоновым изображением.
-
Открыть
-
<div id="modal-full-form" class="uk-modal-full" uk-modal>
<div class="uk-modal-dialog">
<button class="uk-modal-close-full uk-close-large" type="button" uk-close></button>
<div data-uk-img="" data-src="/images/photo2.jpg" class="uk-flex uk-flex-center uk-flex-middle uk-background-cover" uk-height-viewport>
<div class="uk-overlay-primary uk-position-cover"></div>
<div class="uk-overlay uk-position-center uk-light">
<form>
<div class="uk-margin">
<div class="uk-inline">
<span class="uk-form-icon" uk-icon="icon: user"></span>
<input class="uk-input" type="text" placeholder="Логин">
</div>
</div>
<div class="uk-margin">
<div class="uk-inline">
<span class="uk-form-icon" uk-icon="icon: lock"></span>
<input class="uk-input" type="text" placeholder="Пароль">
</div>
</div>
<div class="uk-margin">
<button class="uk-button uk-button-default">Войти</button>
</div>
</form>
</div>
</div>
</div>
</div>