четверг, 14 июня 2018 г.

Bootsrap 4. Модальное окно

Заметка: добавление класса modal-lg делает окно большим, а modal-sm - маленьким.

index.html
<!--  Чтобы сделать модальное окно добавляем к нашей ссылке атрибуты: data-toggle="modal" data-target="#exampleModal" -->

<!-- Модальное окно -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" area-labelledby="exampleModal" aria-hidden="true">
<div class="modal-dialog" role="document"> <!-- добавление класса modal-lg делает окно большим, а modal-sm - маленьким -->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Заголовок окна</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="ture">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row text-center">
<div class="col-4">Колонка 1</div>
<div class="col-8">Колонка 2</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
<button class="btn btn-primary">Сохранить</button>
</div>
</div>
</div>
</div>

Работаем с модальным окном в JQuery.
script.js
/* Модальное окно */
$('#exampleModal').modal({
//keyboard: false, // Кнопка Escape закрывает модальное окно.
// backdrop: "static", // Окно будет закрываться, если мы нажмем кнопку "закрыть". Обычно мы можем его закрыть, если нажмем на поле за преелами модального окна.
});

Комментариев нет:

Отправить комментарий

Materialize-css. Футер

Сделаем футер и прижмем к низу страницы. Документация: https://materializecss.com/footer.html