Bootstrap – это популярная интерфейсная платформа, предоставляющая широкий спектр компонентов и утилит для оптимизации веб-разработки. Одним из наиболее полезных компонентов, предлагаемых Bootstrap, является модальное окно, которое позволяет отображать контент во всплывающем окне. В этой статье мы рассмотрим различные методы реализации модальных окон Bootstrap с помощью Pug, механизма шаблонов для приложений Node.js. Мы предоставим примеры кода для каждого метода, чтобы вы могли выбрать тот, который лучше всего соответствует вашим потребностям.

Метод 1: базовая модальная разметка

Самый простой способ создать модальное окно Bootstrap с помощью Pug — использовать его базовую структуру разметки. Вот пример:

button.btn.btn-primary(type='button', data-toggle='modal', data-target='#myModal') Open Modal
div.modal.fade#myModal(tabindex='-1', role='dialog', aria-labelledby='exampleModalLabel', aria-hidden='true')
  div.modal-dialog(role='document')
    div.modal-content
      div.modal-header
        h5.modal-title Modal Title
        button.close(type='button', data-dismiss='modal', aria-label='Close')
          span(aria-hidden='true') ×
      div.modal-body
        p Modal body text goes here.
      div.modal-footer
        button.btn.btn-secondary(type='button', data-dismiss='modal') Close
        button.btn.btn-primary(type='button') Save changes

Метод 2: использование включений Pug

Если у вас несколько модальных окон или вы хотите, чтобы ваш код был организован, вы можете использовать Pug-включения, чтобы отделить модальную разметку в отдельный файл. Вот пример:

Создайте новый файл с именем modal.pugи определите модальную разметку:

div.modal.fade#myModal(tabindex='-1', role='dialog', aria-labelledby='exampleModalLabel', aria-hidden='true')
  div.modal-dialog(role='document')
    div.modal-content
      div.modal-header
        h5.modal-title Modal Title
        button.close(type='button', data-dismiss='modal', aria-label='Close')
          span(aria-hidden='true') ×
      div.modal-body
        p Modal body text goes here.
      div.modal-footer
        button.btn.btn-secondary(type='button', data-dismiss='modal') Close
        button.btn.btn-primary(type='button') Save changes

Включите модальное окно в основной файл Pug:

include modal.pug
button.btn.btn-primary(type='button', data-toggle='modal', data-target='#myModal') Open Modal

Метод 3: динамические модальные окна

Чтобы создавать динамические модальные окна с помощью Pug и Bootstrap, вы можете использовать способность Pug передавать переменные. Вот пример:

- var modalTitle = 'Dynamic Modal Title'
- var modalBody = 'This is a dynamic modal body.'
button.btn.btn-primary(type='button', data-toggle='modal', data-target='#myModal') Open Modal
div.modal.fade#myModal(tabindex='-1', role='dialog', aria-labelledby='exampleModalLabel', aria-hidden='true')
  div.modal-dialog(role='document')
    div.modal-content
      div.modal-header
        h5.modal-title= modalTitle
        button.close(type='button', data-dismiss='modal', aria-label='Close')
          span(aria-hidden='true') ×
      div.modal-body
        p= modalBody
      div.modal-footer
        button.btn.btn-secondary(type='button', data-dismiss='modal') Close
        button.btn.btn-primary(type='button') Save changes

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

Не забудьте включить необходимые зависимости Bootstrap и Pug, чтобы эти примеры работали правильно. Приятного кодирования!