Bootstrap - Динамічне створення модальних вікон, ІТ Шеф

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

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

Для зручнішого підключення даного функціоналу можна скористатися такими файлами:

• control-modal.js – не стисла версія скрипта для динамічного створення модальних вікон Bootstrap 3;
• control-modal.min.js – стисла (мінімізована) версія скрипта control-modal.js розміром 1,49 КБ.
• control-modal-b4.js та control-modal-b4.min.js - для Bootstrap 4.

Принцип роботи з control-modal.js

1. Вставити або підключити цей скрипт до сторінки. Це необхідно зробити після підключення бібліотеки jQuery та js-плагіна Bootstrap.

2. Створити об'єкт "Модальне вікно" (ModalProcess).

При створенні об'єкта ви можете передати йому не тільки id , але й інші параметри:

• title – заголовок модального вікна;
• body – вміст модального вікна;
• footer – футер модального вікна;
• selector – додати елементи (селектор), за допомогою яких це модальне вікно відкриватиметься.

Приклад, як можна створити об'єкт ModalProcess з id, заголовком, тілом та селектором:

Якщо не вказувати параметри, то він створить модальне вікно з параметрами за замовчуванням (як id буде рівно modal ).

3. Після створення об'єкта його необхідно "ініціалізувати". Ця дія, в даному випадку, просто додає модальне вікно на сторінку (після тега, що відкриває body ).

Функції для роботи з модальним вікном

Дляроботи з модальним вікном Bootstrap цей скрипт надає такі методи:

• changeTitle – змінити заголовок;
• changeBody – змінити вміст тіла;
• changeFooter – змінити футер;
• showModal – викликати (відобразити) модальне вікно;
• hideModal – приховати модальне вікно;
• updateModal – коригувати положення компонента Modal.

Приклади використання control-modal.js

Розглянемо різні приклади, в яких розберемо як за допомогою control-modal.js можна дуже легко створювати та керувати модальними вікнами Bootstrap.

Використання модальних вікон Bootstrap для відображення AJAX контенту

1. Створимо 2 простих php-файли ajax.php і other-ajax.php . Ці файли просто повертатимуть деякий контент.

Вміст файлу ajax.php :

Вміст файлу other-ajax.php :

При цьому те саме модальне вікно використовується для відображення різного AJAX контенту.

Використання вікна для відображення контенту data-атрибута

Приклад Bootstrap 4, в якому модальне вікно використовується для відображення data-атрибута посилання.

Демо цього ж прикладу, але на Bootstrap 3:

Як з одного вікна відкрити інше модальне вікно

Приклад на Bootstrap 4, в якому розглянемо, як можна дуже просто (за допомогою control-modal.js) організувати відкриття одного модального вікна з іншого:

Цей приклад, але з 2 модальними вікнами і на Bootstrap 3:

На Bootstrap 3 цей приклад (з використанням control-modal.js) доступний за допомогою наступного посилання:

---