TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Як створити Bootstrap 5 Modal?

3

Bootstrap 5 Modal – це в основному спливаюче вікно, яке відображається при натисканні на такий елемент, як кнопка або текстове посилання. Він використовує JavaScript для відображення вмісту при натисканні з ефектом лайтбоксу. Модальне спливаюче вікно можна закрити, натиснувши кнопку закриття або клацнувши поза модальним вікном. Модальний також згадується з багатьма іншими іменами, такими як спливаюче вікно, діалогове вікно або сповіщення. Зауважте, що це спливаюче попередження відрізняється від оригінального компонента сповіщення Bootstrap.

У цьому підручнику давайте створимо деякі модальні спливаючі вікна, щоб зрозуміти деталі компонента.

Модальний підручник Bootstrap 5

Цей підручник охоплює такі теми:

  1. Модальний спрацьовує при натисканні кнопки
  2. Прокручування вмісту всередині модального
  3. Розмір модалів
  4. Модальний з підказкою та povover
  5. Використання макета сітки всередині модального вмісту
  6. Налаштування модального компонента

1 Створення простого режиму, що запускається при натисканні кнопки

Bootstrap модальний містить два компоненти – кнопка і модальне вікно. Нижче наведено код кнопки для модального:

<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#Modal1"> Click to launch modal </button>

Як бачите, це не що інше, як компонент кнопки з додатковими атрибутами:

  • Атрибут data-toggle = "модальний" використовується для ідентифікації кнопки як модального компонента.
  • Далі-data-target = "#Modal1 ″, який має бути ідентифікатором, має бути унікальним. Цей самий ідентифікатор потрібно використовувати в модальному компоненті.

Нижче наведено код модального спливаючого вікна, яке слід використовувати між розділом тіла шаблону початкового завантаження Bootstrap.

<div class="modal fade" id="Modal1" tabindex="-1" role="dialog" aria-labelledby="Modal1" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLabel">Here is a Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Here goes the content of the modal. </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-warning">Save</button> </div> </div> </div> </div>

У модальному компоненті використовується кілька класів CSS:

  • Зовнішня обгортка div має мати клас CSD “.modal”. Додатковий клас.

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

  • Обов’язково додайте інші атрибути, такі як tabindex, role та aria-hidden.

  • Модальний зміст слід додати всередину

    теги, ідентифіковані класом “.modal-dialog”.

  • Модал має структуру панелі або картки з вмістом, заголовком, заголовком, текстом та колонтитулами.

  • Усі частини модалу повинні бути загорнуті всередину a

    з класом .modal-content.

  • Розділ заголовка ідентифікується класом “.modal-header” і має два компоненти-заголовок та кнопку. Компонент title використовує “.modal-title” і використовується для додавання заголовка до модального спливаючого вікна. Компоненти кнопки використовуються для включення значка закриття (X) для закриття модального діалогового вікна.

  • Модальне тіло використовує клас ".modal-body" і містить тіло модального, яке може бути будь-якими елементами, такими як текст, кнопка, підказка або вікно переходу.

  • Розділ нижнього колонтитула використовує “.modal-footer” і містить дві кнопки-одну для закриття, а іншу для збереження. Кнопка закриття фактично закриє модальне спливаюче вікно. Але кнопка збереження – це фіктивна кнопка, і ви повинні додати власний код, щоб зберегти документи на сервері.

Остаточний результат буде просто виглядати як кнопка, і натискання на ньому викликає спливаюче модальне вікно.

Як створити Bootstrap 5 Modal?

Модальний завантаження

Ви можете додати будь -який тип вмісту всередину модального розділу, а також змінити розділи верхнього та нижнього колонтитулів.

2 Створення модального з прокручуванням вмісту

Якщо довжина вмісту велика, його можна прокручувати в модальному режимі без прокрутки зовнішньої сторінки. Нижче наведено код для створення прокручуваного модального спливаючого вікна.

<button type="button" class="btn btn-danger btn-md" data-toggle="modal" data-target="#Modal2"> Open modal </button> <div class="modal fade" id="Modal2" tabindex="-1" role="dialog" aria-labelledby="Modal2" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLabel">Modal with Scrolling Content</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Here is the content for modal, enter lengthy content so that you can see the scrolling effect. </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary btn-md" data-dismiss="modal">Close</button> <button type="button" class="btn btn-info btn-md">Save</button> </div> </div> </div> </div>

Модаль прокрутки буде виглядати так:

Як створити Bootstrap 5 Modal?

Модальний вміст, який можна прокручувати

3 Розмір моделей

Розмір тут вказує на ширину модального. Ви можете збільшити або зменшити розмір, додавши до класу “.modal-dialog” клас “.modal-lg” або “.modal-sm”.

Повний код більшої модальної рамки наведено нижче:

<button class="btn btn-primary" data-toggle="modal" data-target=".example-modal-lg">Large modal</button> <div class="modal fade example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="LargeModal" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLabel">Large Modal Title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Here goes the content of large modal. </div> <div class="modal-footer"> <button type="button" class="btn btn-info" data-dismiss="modal">Close</button> <button type="button" class="btn btn-danger">Save</button> </div> </div> </div> </div>

Так само повний код для меншої модальної коробки виглядає так:

<button type="button" class="btn btn-warning" data-toggle="modal" data-target=".example-modal-sm">Small modal</button> <div class="modal fade example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="SmallModal" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLabel">Small Modal Title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Here goes the content of small modal. </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-secondary">Save</button> </div> </div> </div> </div>

Ви можете побачити більші, стандартні та менші модальні розміри, як показано нижче.

Як створити Bootstrap 5 Modal?

Більший модальний

Як створити Bootstrap 5 Modal?

Модальний за замовчуванням

Як створити Bootstrap 5 Modal?

Менший модальний

4 Модальний з підказкою та Popover

У модальний вміст також можна вставити підказки та спливаючі вікна. Нижче наведено код для цього:

<!-- Button trigger for modal --> <button type="button" class="btn btn-secondary btn-md" data-toggle="modal" data-target="#Modaltooltip"> Modal with Popover and Tooltip </button> <!-- Modal --> <div class="modal fade" id="Modaltooltip" tabindex="-1" role="dialog" aria-labelledby="Modaltooltip" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLabel">Here is a Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <h5>Popover in Modal</h5> <p>Click button for popover. <a href="#" role="button" class="btn btn-dark" title="Popover Title" data-content="Enter content to be shown inside popover" data-toggle="popover">button</a></p> <hr> <h5>Tooltip in Modal</h5> <p>Hover over <a href="#" title="Tooltip on Top" data-toggle="tooltip">this hyperlink</a> to see a tooltip.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary btn-md" data-dismiss="modal">Close</button> <button type="button" class="btn btn-warning btn-md">Save</button> </div> </div> </div> </div>

Підказка та спливаюче вікно виглядатимуть нижче. Підказка відображатиметься зверху при наведенні, а спливаюча кнопка – ліворуч.

Як створити Bootstrap 5 Modal?

Перехід та підказки всередині модального вмісту

Примітка: Пам’ятайте, що підказка та popover потребують додаткового Popper JavaScript разом із файлами сценарію Bootstrap. Докладніше про підказки Bootstrap та компоненти Bootstrap.

5 Вставка макета сітки всередину модального вмісту

Bootstrap має потужну систему компонування сітки flexbox. Ви можете легко вставляти вміст всередину модального за допомогою стовпців макета сітки. Нижче наведено приклад вставлення різних типів стовпців сітки в модальний режим.

<button type="button" class="btn btn-dark btn-md" data-toggle="modal" data-target="#Modalgrid"> Modal with Grid </button> <div class="modal fade" id="Modalgrid" tabindex="-1" role="dialog" aria-labelledby="Modalgrid" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLabel">Here is a Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="container-fluid"> <div class="gridmodal"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div> </div> <div class="row"> <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div> <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div> </div> <div class="row"> <div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div> </div> <div class="row"> <div class="col-sm-9"> .col-sm-9 <div class="row"> <div class="col-8 col-sm-6"> .col-8 .col-sm-6 </div> <div class="col-4 col-sm-6"> .col-4 .col-sm-6 </div> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary btn-md" data-dismiss="modal">Close</button> <button type="button" class="btn btn-warning btn-md">Save</button> </div> </div> </div> </div>

У браузері це має виглядати так:

Як створити Bootstrap 5 Modal?

Модальний із вмістом макета сітки

6 Налаштування модального компонента Bootstrap

Як бачите, остання версія Bootstrap дозволяє додавати будь -який тип вмісту всередину модального спливаючого вікна. Ви можете налаштувати колір, рамки та вигляд кожного елемента в модальному режимі за допомогою додаткового додаткового CSS самостійно. Наприклад, у наведеному вище прикладі сітки ми використовували власний клас CSS “.gridmodal” для додавання фону, меж та інтервалів, як показано нижче.

<style> .gridmodal .row>[class^=col-] { padding-top: .75rem; padding-bottom: .75rem; margin-bottom: .75em; background-color: rgba(86,61,124,.15); border: 1px solid rgba(86,61,124,.2); } </style>

Ви також можете додати клас CSS до класів Bootstrap за замовчуванням. Наприклад, якщо ви хочете додати ефект тіні до модальних кнопок, ви можете просто додати клас “btn-md”, як показано нижче.

<!-- Button trigger for modal --> <button type="button" class="btn btn-secondary btn-md" data-toggle="modal" data-target="#Modal1"> Click to launch modal </button> <!-- Modal --> <div class="modal fade" id="Modal1" tabindex="-1" role="dialog" aria-labelledby="Modal1" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLabel">Here is a Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Here goes the content of the modal. </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary btn-md" data-dismiss="modal">Close</button> <button type="button" class="btn btn-warning btn-md">Save</button> </div> </div> </div> </div>

Ми додали власний клас “btn-md” до трьох компонентів кнопок, і результат буде показаний, як показано нижче, у браузері:

Як створити Bootstrap 5 Modal?

Кнопки з ефектом тіні

Нижче наведено користувацький CSS для класу “btn-md”, який можна додати всередину частини заголовка сторінки HTML у межах… тегів. Або ви можете додати код у зовнішній файл CSS (ймовірно, style.css вашої теми ») і зв’язати CSS у заголовку.

.btn-md { border-width: 0; outline: none; border-radius: 2px; box-shadow: 0 1px 4px rgba(0, 0, 0, .6); cursor: pointer; }

Підведенню

Модалі – це простий спосіб відображення вмісту у спливаючому діалоговому вікні. Це дуже допомагає зосередитися на основному вмісті, запропонованому на сторінці. Зацікавлені користувачі можуть натиснути посилання або кнопку, щоб викликати модальні вікна та прочитати далі.


Вивчити Bootstrap 5 (індекс )


Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі