Модал Bootstrap 4 похож на всплывающее окно. Вы можете открыть свой контент в хорошо продуманном всплывающем окне, используя модальное окно начальной загрузки. По сути, модальный Bootstrap 4 основан на javascript. Потому что это будет работать с использованием javascript. Итак, в этом уроке мы изучим все, что касается модального окна, на очень простых и отдельных примерах.

«Иногда нужно открыть данные во всплывающем контейнере с разным дизайном и содержимым. В то время это будет слишком полезно. Если вы собираетесь создать собственное модальное окно, то это будет очень доступно по времени. Но Bootstrap предоставляет модальным окнам простые методы. Нам нужно просто использовать классы, и наше модальное окно будет готово.

Здесь у нас много модальных окон с разными кнопками и методами. Как вы можете использовать только модальную кнопку отмены, вы можете использовать модальную кнопку ok и кнопку отмены. не беспокойтесь об этом, я покажу все методы с примерами. Итак, приступим.

Из-за HTML5 атрибут autofocus HTML не будет работать в модальных окнах начальной загрузки. Если у вас возникла эта проблема, вам нужно добавить дополнительный код javascript в нижний колонтитул. Я дал этот код внизу.

Простой модальный Bootstrap 4 с кнопками

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

Пример

Прокрутка Bootstrap 4 Модальный

Если вам нужен необычный всплывающий/дропбокс, то это лучше для вас. Здесь bootstrap обеспечивает эффект прокрутки в Dropbox. Когда вы нажмете на дропбокс, это будет похоже на эффект прокрутки. Это будет хорошо смотреться.

Имейте в виду, что иногда этот эффект не отображается в раскрывающемся списке с небольшим объемом данных. Я имею в виду, что это будет выглядеть правильно в раскрывающемся списке, который имеет самые большие данные для шоу во всплывающем окне.

Пример

Вертикально центрированный модальный Bootstrap 4

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

Здесь все содержимое точно такое же. Вам нужно добавить только один новый класс .modal-dialog-centered. Это сделает ваше всплывающее окно/дропбокс в центре вашего вертикального экрана.

Пример

Дополнительные размеры Bootstrap 4 Modal

Здесь вы можете настроить размер модального окна. Если вы хотите открыть модальное окно небольшого размера, вы можете это сделать, и если вы хотите открыть модальное окно большого размера, это также будет доступно.

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

Пример

Читайте также:

1. Введение в Bootstrap 4

2. В чем разница между Bootstrap 3 и Bootstrap 4?

3. Преимущества использования Bootstrap 4

4. Онлайн или офлайн? Как вы должны использовать bootstrap 4 онлайн или оффлайн? Почему?

5. Сетка Bootstrap 4 с отдельными примерами

6. Таблицы Bootstrap 4 со структурированными и простыми примерами

7. Кнопки Bootstrap 4 со структурированными и простыми примерами

8. Карты Bootstrap 4 со структурированными и простыми примерами

9. Выпадающие списки Bootstrap 4 со структурированными и простыми примерами

10. Навигация Bootstrap 4 со структурированными и простыми примерами

11. Навигационная панель Bootstrap 4 со структурированными и простыми примерами

12. Карусель Bootstrap 4 с простыми примерами

13. Modal Bootstrap 4 с простыми примерами

** Вывод **

Надеюсь, вам понравился мой учебник по модели bootstrap 4. Это поможет вам слишком много. Если у вас есть вопросы, вы можете задать их мне в нижнем поле для комментариев.

Первоначально опубликовано на https://www.designhub4u.com 5 декабря 2019 г.