Модальне діалогове вікно в Bootstrap 4

Bootstrap дозволяє додати модальне діалогове вікно на ваш сайт. Модальне — це діалогове вікно, яке отримує фокус, тоді як решта екрана затемняється. Це змушує користувача прийняти якісь дії в діалоговому вікні, перш ніж продовжити працювати далі.

Щоб створити модальне вікно, використовуйте клас .modal спільно з іншими класами .modal-*, які визначають кожен розділ модального вікна.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#flipFlop"> Натисніть на мене
</button> <!--Модальне вікно--> <div class="modal fade" id="flipFlop" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="modalLabel">Сандалія</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Закрити"> <span aria-hidden="true">&times;</span>
</button>
</div> <div class="modal-body">Тип взуття з відкритими шкарпетками.</div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрити</button>
</div>
</div>
</div>
</div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

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

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

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

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#smallShoes"> Натисніть на мене
</button> <!--Модальне вікно--> <div class="modal fade" id="smallShoes" tabindex="-1" role="dialog" aria-labelledby="modalLabelSmall" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="modalLabelSmall">Маленькі туфлі</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Закрити"> <span aria-hidden="true">&times;</span>
</button>
</div> <div class="modal-body">Маленькі туфлі зазвичай носять люди з маленькими ногами.</div>
</div>
</div>
</div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Велике вікно

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

>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#largeShoes"> Натисніть на мене
</button> <!--Модальне вікно--> <div class="modal fade" id="largeShoes" tabindex="-1" role="dialog" aria-labelledby="modalLabelLarge" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="modalLabelLarge">Великі туфлі</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Закрити"> <span aria-hidden="true">&times;</span>
</button>
</div> <div class="modal-body">Люди з маленькими ногами зазвичай уникають великих туфель.</div>
</div>
</div>
</div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Прибрати ефект згасання

Ви можете видалити клас .fade, щоб позбутися ефекту згасання під час відкриття та закриття вікна.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#largeShoes"> Натисніть на мене
</button> <!--Модальне вікно--> <div class="modal" id="largeShoes" tabindex="-1" role="dialog" aria-labelledby="modalLabelLarge" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="modalLabelLarge">Чистка взуття</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Закрити"> <span aria-hidden="true">&times;</span>
</button>
</div> <div class="modal-body">Приберіть ефект згасання відполіровавши своє взуття!</div>
</div>
</div>
</div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>