Як зробити, щоб при успішному надсиланні форми спрацьовувало відкриття модального вікна Fancybox?

Як зробити, щоб при успішному надсиланні форми спрацьовувало відкриття модального вікна Fancybox? В мене зараз форма закривається. Але як можна зробити, щоби виходило модальне вікно. Буду радий будь-якої допомоги

document.getElementById('call-form2').addEventListener("submit", function(event) < event.preventDefault(); // Запобігаємо надсилання форми за замовчуванням const formDataCall = new FormData(document.getElementById('call-form2) )); // Відправляємо дані на сервер за допомогою Fetch API fetch("/", < method: "POST", body: formDataCall >) .then(function(response) < if (response.ok) < document.getElementById('call-form2').reset(); $. fancybox.close(); // Закриваємо поточний fancybox >>) .catch(function(error) < console.error("Помилка:", error);

1 відповідь 1

Ви можете замінити $.fancybox.close() таким чином:

.then(function(response) < if (response.ok) < document.getElementById('call-form2').reset(); $.fancybox.open(< src: '#success-modal', // селектор модального вікна type: 'inline', // тип вмісту - inline>);

Тобто тут після успішного відправлення форми викликається метод $.fancybox.open(), який відкриває новий FancyBox.

Отже, у коді, який я запропонував, після успішного відправлення форми буде запускатися функція then , яка виконуватиметься лише в тому випадку, якщо відповідь від сервера отримана без помилок.

Всередині цієї функції буде викликатись метод $.fancybox.open() , який дозволяє відкрити нове модальне вікно. Цей метод має різні параметри для налаштування. У цьому випадку я використовував параметри src та type .

Параметр src вказує на розташування контенту, який потрібно показати в модальному вікні. У цьому випадку я вказав селектор #success-modal, який повинен відповідати модальному вікну, яке ви хочете відкрити.Ви можете змінити цей селектор на свій.

Параметр type визначає тип контенту, який відображається у модальному вікні. Я використовував тип inline , що означає, що вміст знаходиться на сторінці, а не завантажується з іншої URL-адреси. Ця опція дозволяє використовувати різні елементи HTML, наприклад приховані блоки, як контент для модального вікна.

Як створити форму у модальному вікні Bootstrap: простий гайд

Інтерфейс є одним з найважливіших елементів дизайну будь-якого веб-сайту або програми. Для цього важливо створити гарну розмітку, що забезпечує зручний стиль і функціональність. У цій статті ми розглянемо, як створити форму у модальному вікні bootstrap.

Bootstrap – це популярний фреймворк, який надає набір елементів для розробки веб-сайтів, забезпечує швидке та ефективне створення інтерфейсів. Одним з таких елементів є модальне вікно, яке може використовуватися для відображення контенту, такого як форми, зображення та інші елементи.

У цій статті ми зосередимося на формі в модальному вікні. Ми навчимося використовувати різні функції bootstrap, у тому числі класи, тому що вони надають готові стилі та розташування елементів на сторінці. Вся розмітка та стилі bootstrap легко піддаються кастомізації, завдяки чому можна створити унікальний інтерфейс.

Підготовка

Перш ніж розпочати створення поп-ап вікна з формою в bootstrap, необхідно підготуватися.

• Переконайтеся, що ви використовуєте останню версію bootstrap для кращої сумісності та функціональності;
• Заздалегідь визначте елементи вашої форми та розмітку, яку ви хочете використати;
• Виберіть відповідний стиль та дизайн для вашого інтерфейсу;
• Визначте, який вид поп-ап вікна найкраще підходить для вашого сайту;
• Якщо Ви плануєте використовувати таблиці, підготуйте таблицю заздалегідь.

Після того, як ви впевнені, що всі елементи підготовлені, ви готові приступити до створення форми в модальному вікні bootstrap.

Установка Bootstrap

Bootstrap – це популярний фреймворк, який використовується для швидкого та простого створення красивого та сучасного інтерфейсу веб-сайту. Для початку роботи з Bootstrap потрібно встановити його.

1. Завантажте потрібну версію Bootstrap із офіційного сайту (https://getbootstrap.com/).

2. Розархівуйте завантажений архів у зручне місце на вашому комп'ютері.

3. Вставте наступну розмітку в HEAD вашого HTML документа:

4. Після того, як ви підключили bootstrap.css та bootstrap.js, ви можете використовувати елементи дизайну ваших форм, такі як кнопки, текстові поля тощо.

5. Bootstrap пропонує модальне вікно, яке є поп-апом, для виведення форми на екрані. Приклад коду модального вікна:

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

×

Email address

We'll never share ваш email з anyone else.

Password

Надіслати

Close

Save changes

6. Це базовий приклад розмітки модального вікна, яке можна модифікувати під свої потреби, додати свій стиль та використовувати для кожної форми на вашому сайті.

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

Підключення Bootstrap до сторінки

Bootstrap – це популярний фреймворк для створення веб-сайтів за допомогою HTML, CSS та JavaScript. З його допомогою можна швидко та легко створювати модальні вікна (поп-апи), а також стилізовані форми та інші елементи для сайту.

Щоб використовувати bootstrap, необхідно завантажити його файли з офіційного сайту та підключити їх до веб-сторінки. Для цього в head розмітці сторінки потрібно додати посилання на файл css:

Також необхідно додати JavaScript файл у кінці body розмітки:

Підключивши bootstrap, можна використовувати різні класи для створення модальних вікон, що укладають форми та інших елементів в стильний дизайн. Наприклад:

• .modal - Клас для створення модальних вікон
• .form-control - Клас для стилізації форми
• .btn - Клас для створення стилізованої кнопки
• .modal-header і .modal-body - класи для створення заголовка та тіла модального вікна

Таким чином, підключення та використання bootstrap може спростити створення модальних вікон, форм та інших елементів на вашому сайті, а також надати їм стильний дизайн.

Створення модального вікна

Модальне вікно - це поп-ап, що з'являється на екрані поверх основного інтерфейсу і привертає увагу користувача. У bootstrap створення модального вікна включає розмітку і стиль для дизайну форми.

Розмітка для модального вікна складається з кількох елементів, серед яких: контейнер із класом «modal», заголовок вікна, вміст вікна та кнопки закриття. Для виведення заголовка використовується тег "h4", а для контенту - тег "p".

Для завдання стилю використовуються класи bootstrap, такі як "modal-dialog" для завдання розміру вікна та "modal-content" для встановлення фону вікна та візуального стилю. Також можна додати класи «modal-header» та «modal-footer» для заголовка та підвалу відповідно.

Для роботи з модальними вікнами необхідно підключити javascript-бібліотеку bootstrap. Це дозволить відкривати та закривати вікна за допомогою кнопок та посилань на сторінці.

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

Додавання кнопки для виклику модального вікна

Bootstrap пропонує зручний інтерфейс для створення модальних вікон. Однак, для їх виклику необхідно додати елемент на сторінку, який ініціюватиме поп-апу.

Для цього в розмітку сторінки вставляємо кнопку, на яку користувач натискатиме. Наприклад:

Відкрити модальне вікно

У цьому прикладі ми використовуємо класи btn btn-primary для завдання стилю кнопки. Атрибути data-toggle="modal" і data-target="#myModal" вказують, що кнопка викликає модальне вікно з ідентифікатором #myModal.

Зверніть увагу, що ідентифікатор модального вікна має збігатися з тим, що вказано в атрибуті data-target кнопки.

Також можна використовувати будь-який інший елемент як ініціатор модального вікна, наприклад посилання:

Таким чином, за допомогою простої розмітки та класів bootstrap ми можемо створити функціональний та красивий дизайн модальних вікон.

Додавання HTML-розмітки модального вікна

Розмітка модального вікна – це основний елемент інтерфейсу на сторінках зі спливаючими поп-апами. Bootstrap – це бібліотека компонентів, яка полегшує створення інтерфейсу та додавання елементів до сторінки. Для додавання форми до модального вікна вам потрібно створити відповідну розмітку:

Крок 1 Визначте блок, в якому буде розміщено модальне вікно:

Крок 2 Додайте заголовок та основний зміст модального вікна:

Заголовок модального вікна

Основний зміст модального вікна тут.

Крок 3 Додайте кнопки керування вікном:

Після того, як ви додали всі необхідні елементи в розмітку модального вікна, ви можете налаштувати їх стиль, використовуючи відповідні класи Bootstrap. Готовий дизайн модального вікна виглядає професійно та зручно для користувачів.

Додавання форми

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

Для додавання форми в модальне вікно потрібно створити елемент form за допомогою тега і задати йому атрибути, такі як id, class і method. Для забезпечення адаптивності форми в різних роздільних здатності екранів рекомендується використовувати класи Bootstrap, такі як form-group і form-control.

• class="form-group": використовується для угрупування елементів форми.
• class="form-control": застосовується до елементів введення, таких як текстові поля, списки, що випадають, та інші для їх правильного відображення.

Щоб форма відображалася у модальному вікні, шар має бути класу модал. Bootstrap пропонує класи для контейнера модального вікна, заголовка вікна та вмісту вікна. Також потрібно додати кнопку для відображення модального вікна за допомогою класу "modal-trigger".

Після додавання всіх необхідних елементів та стилів, можна приступати до створення логіки роботи форми за допомогою JavaScript. У функції-обробнику потрібно запрограмувати відправлення даних форми на сервер та закриття модального вікна після успішного надсилання.

У результаті, після коректної розмітки елементів форми та модального вікна, додавання стилів та JavaScript-логіки, можна отримати зручну форму, яка дозволить користувачеві легко та швидко заповнювати дані та відправляти їх на сервер.

Створення форми

Створення форми – один із ключових елементів інтерфейсу веб-сайту. Вона дозволяє користувачеві заповнити та надіслати інформацію. Модальне вікно чи поп-ап є зручним способом показати форму, не відволікаючи користувача від основного контенту сайту.

Bootstrap – це інструментарій для розмітки, який дозволяє створювати гнучкий, інтерактивний та адаптивний дизайн за допомогою HTML, CSS та JavaScript.

Для створення модального вікна з формою Bootstrap необхідно використовувати спеціальний елемент - Modal. Він дозволяє створити блок, який з'являється поверх основного контенту та надає користувачеві можливість взаємодії зі сторінкою без її перезавантаження.

Під час створення форми необхідно визначити типи полів для введення даних, такі як текстове поле, поле для введення пароля, чекбокси, кнопки і т.д. Необхідно також зазначити наявність обов'язкових або опціональних полів для заповнення.

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

Додавання полів для введення даних

Дизайн та стиль елементів форми у модальному вікні Bootstrap безпосередньо впливають на зручність введення даних користувачем. При створенні розмітки форми у вікні необхідно врахувати всі особливості інтерфейсу, щоб користувач зміг легко заповнити всі поля.

Bootstrap надає безліч елементів для створення форми: текстові поля, списки, радіокнопки, чекбокси та ін. Для додавання елементів у форму необхідно вказати їх тип та назву.

Наприклад, для додавання текстових полів можна використовувати наступний код:

У цьому прикладі використовується клас "form-control", який задає стиль текстового поля. Також є назва та опис елемента (label) і placeholder для підказки користувачеві.

Варіант розмітки форми та використання елементів залежить від необхідної функціональності, проте важливо не забувати про те, що форма має бути легко сприйманою та зручною для користувачів.

• Для полів у формі зазвичай вказуються параметри:
  • type – визначальний тип поля;
  • id – унікальний ідентифікатор поля, необхідний, наприклад, зв'язку з лейблом;
  • name – ім'я поля, яке використовуватиметься під час передачі даних;
  • class – додатковий клас для завдання стилів елементів.

  Таким чином, коректне додавання полів у модальне вікно Bootstrap вимагає не тільки знань HTML, CSS та JS, а також вміння працювати з фреймворком Bootstrap.

  Додавання кнопок

  Модальне вікно bootstrap без кнопок може бути неповноцінним. Додавання кнопок у розмітку поп-ап вікна дуже важливе для кращого досвіду користувачів. Кнопки можуть виконувати функції, наприклад відправлення форми або закриття модального вікна, і підвищувати зручність використання інтерфейсу.

  Для додавання кнопок достатньо загорнути елемент у тег button. У bootstrap вже є шаблони для стилів клавіш, вони прописані в класах.Наприклад, для створення кнопки-направлення форми необхідно використовувати клас btn-primary. Якщо потрібна кнопка для закриття модального вікна, слід використовувати клас btn-secondary або btn-danger.

  Кнопка	Клас	Призначення
  Надіслати	btn-primary	Відправлення форми
  Закрити	btn-secondary	Закриття модального вікна

  Якщо потрібно створити кілька кнопок на модальному вікні, можна використовувати контейнер div з класом modal-footer. У цьому контейнері слід розміщувати всі кнопки, вони відображатимуться внизу вікна та займатимуть усе доступне по ширині місце.

  Додавання кнопок до модального вікна без особливих знань HTML і CSS робиться дуже легко завдяки bootstrap. Усі елементи вже мають стиль, що відповідає дизайну фреймворку. Єдине, що потрібно зробити, - це вибрати правильний клас для кнопки і розмістити її на потрібному місці в розмітці.

  Створення кнопок «Надіслати» та «Скасувати»

  Після того, як ми намалювали форму в модальному вікні bootstrap, настав час додати кнопки «Відправити» та «Скасувати». Вони дуже важливі для зручності користувачів та стилістичного оформлення інтерфейсу.

  Для початку створимо розмітку елементів. Усередині блоку з класом "modal-footer" додамо кнопку з класом "btn btn-secondary" та текстом "Скасувати". Потім додамо кнопку «Надіслати» з класом «btn btn-primary» та текстом «Надіслати».

  Стиль кнопок вже успадковується від bootstrap, тому нам не потрібно додатково їх стилізувати.

  Ось як виглядатиме даний елемент у коді:

  Кнопка "Скасувати" має атрибут "data-dismiss", який відповідає закриття модального вікна без надсилання даних форми.

  Якщо ви бажаєте додати додаткові кнопки, ви можете повторювати процес, розміщуючи їх поряд з попередніми елементами в блоці «modal-footer».

  Додавання функціоналу для кнопок «Надіслати» та «Скасувати»

  Для покращення інтерфейсу користувача та зручності роботи з формою в модальному вікні bootstrap, необхідно додати функціонал для кнопок «Відправити» та «Скасувати».

  Створимо розмітку елементів модального вікна та додамо їх стилі з урахуванням дизайну сайту. Наприклад, використовуємо макет із двома полями для введення інформації: ім'я та email. Помістимо ці поля всередину тега

  Компоненти

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

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

  Модальні вікна мають обтічну форму, але гнучка, діалогове вікно з мінімальним набором функцій і за замовчуванням.

  autofocus атрибут HTML не має жодного ефекту в Bootstrap модальні дієслова. для досягнення такого ж ефекту, використовувати деякі користувацькі JavaScript:

  $('#myModal').on('shown.bs.modal',
  function
  ()
  
  $('#myInput').focus()
  >)

  Відкриття кількох модальних вікон не підтримується

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

  Розміщення розмітки модального вікна

  Завжди намагайтеся помістити розмітку модального вікна у верхньому рівні HTML-документа, щоб уникнути впливу інших елементів на зовнішній вигляд модального вікна та його функціональність.

  Застереження для мобільних пристроїв

  Існують деякі застереження щодо використання дієслова на мобільних пристроях. Дивіться наші документи підтримки браузера для деталей.

  Приклад статичного

  Оброблену модальне вікно Заголовок, тіло, та набір дій у футері.

  Modal title

  
  class="modal fade">
  
  class="modal-dialog"
  role="document">
  
  class="modal-content">
  
  class="modal-header">
  
  type="button"
  class="close"
  data-dismiss="modal"
  aria-label="Close">
  
  aria-hidden ="true">×
  
  
  
  class="modal-title">Modal title
  
  
  class="modal-body">
  One fine body…
  
  
  
  class="modal-footer">
  
  type="button"
  class="btn btn-secondary"
  data-dismiss="modal">Close
  
  type="button"
  class="btn btn-primary">Save changes
  
  
  
  

  Демо

  Переключити модальне вікно через JavaScript, натиснувши на кнопку нижче.Він ковзатиме вниз і зникають у верхній частині сторінки.

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

  Текст у модальному вікні

  Молліс УДО, є номери commodo передбачуване luctus, нісі erat porttitor лігули.

  Інформери у модальному вікні

  Ця кнопка повинна викликати діалогове вікно на кліку.

  Підказки у модальному вікні

  Це посилання та це посилання повинне мати підказку при наведенні.

  Переповнюючи текст для відображення прокручування;

  Кра маттіс міннеаполіс пурус сидіти амет будь-якого fermentum.. Одіо Хусто Кра, dapibus AC та це є у, egestas егет квам. Морбі Лео рисус, порт змінного струму міннеаполіс змінного струму, напередодні Ерос.

  Praesent commodo курсус "магна", ТОВ "Нісл" scelerisque міннеаполіс пов. Vivamus sagittis lacus Вел augue laoreet погляд долор auctor faucibus.

  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

  Кра маттіс міннеаполіс пурус сидіти амет будь-якого fermentum.. Одіо Хусто Кра, dapibus AC та це є у, egestas егет квам. Морбі Лео рисус, порт змінного струму міннеаполіс змінного струму, напередодні Ерос.

  Praesent commodo курсус "магна", ТОВ "Нісл" scelerisque міннеаполіс пов. Vivamus sagittis lacus Вел augue laoreet погляд долор auctor faucibus.

  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

  Кра маттіс міннеаполіс пурус сидіти амет будь-якого fermentum.. Одіо Хусто Кра, dapibus AC та це є у, egestas егет квам. Морбі Лео рисус, порт змінного струму міннеаполіс змінного струму, напередодні Ерос.

  Praesent commodo курсус "магна", ТОВ "Нісл" scelerisque міннеаполіс пов. Vivamus sagittis lacus Вел augue laoreet погляд долор auctor faucibus.

  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui.Donec ullamcorper nulla non metus auctor fringilla.

  
  
  type="button"
  class="btn btn-primary btn-lg"
  data-toggle="modal"
  data-target="#myModal"> Launch demo modal
  
  class="modal fade"
  id="myModal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myModalLabel"
  aria-hidden ="true">
  
  class="modal-dialog"
  role="document">
  
  class="modal-content">
  
  class="modal-header">
  
  type="button"
  class="close"
  data-dismiss="modal"
  aria-label="Close">
  
  aria-hidden ="true">×
  
  
  
  class="modal-title"
  id="myModalLabel">Modal title
  
  
  class="modal-body"> .
  
  class="modal-footer">
  
  type="button"
  class="btn btn-secondary"
  data-dismiss="modal">Close
  
  type="button"
  class="btn btn-primary">Save changes
  
  
  
  

  Зробити модальності можна

  Не забудьте додати role="dialog" і aria-labelledby=". " , посилаючись на модальне вікно Заголовок, щоб .modal , і role="document" до .modal-dialog сам.

  Крім того, ви можете дати опис вашого модального вікна діалог з aria-describedby на .modal .

  Вбудовування відео YouTube

  Вбудовування відео YouTube в модальності вимагає додаткових JavaScript не в Bootstrap щоб автоматично зупинити відтворення та багато іншого. Ознайомитися з цією корисною переповнення стека пост для отримання додаткової інформації.

  Опційні розміри

  Модальні вікна мають два додаткові розміри, доступні через класи модифікатор, який буде розміщений на .modal-dialog . Ці розміри ударом в деякі точки зупинки, щоб уникнути горизонтальної смуги прокручування на вузьких вікнах.

  
  
  class="btn btn-primary"
  data-toggle="modal"
  data-target=".bd-example-modal-lg">Large modal
  
  class="modal fade bd-example-modal-lg"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myLargeModalLabel"
  aria-hidden ="true">
  
  class="modal-dialog modal-lg">
  
  class="modal-content"> .
  
  
  
  type="button"
  class="btn btn-primary"
  data-toggle="modal"
  data-target=".bd-example-modal-sm">Small modal
  
  class="modal fade bd-example-modal-sm"
  tabindex="-1"
  role="dialog"
  aria-labelledby="mySmallModalLabel"
  aria-hidden ="true">
  
  class="modal-dialog modal-sm">
  
  class="modal-content"> .
  
  

  Large modal

  Small modal

  Видалити анімацію

  Для модальності, які просто з'являються, а не зникають, переглянути, видалити .fade клас від модального вікна розмітки.

  
  class="modal"
  tabindex="-1"
  role="dialog"
  aria-labelledby=". "
  aria-hidden ="true"> .
  

  За допомогою блокової системи

  Щоб скористатися перевагами Bootstrap блокова система в модальне вікно, просто гніздо .container-fluid В .modal-body , а потім використовувати звичайні блокова система класів всередині цього контейнера.

  Modal title

  
  id="gridSystemModal"
  class="modal fade"
  tabindex="-1"
  role="dialog"
  aria-labelledby="gridModalLabel"
  aria-hidden ="true">
  
  class="modal-dialog"
  role="document">
  
  class="modal-content">
  
  class="modal-header">
  
  type="button"
  class="close"
  data-dismiss="modal"
  aria-label="Close">
  aria-hidden ="true">×
  
  
  class="modal-title"
  id="gridModalLabel">Modal title
  
  
  class="modal-body">
  
  class="container-fluid bd-example-row">
  
  class="row">
  
  class="col-md-4">.col-md-4
  
  class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4
  
  
  class="row">
  
  class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3
  
  class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4
  
  
  class="row">
  
  class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3
  
  
  class="row">
  
  class="col-SM-9"> Level 1: .col-sm-9  
  class="row">
  
  class="col-xs-8 col-sm-6"> Level 2: .col-xs-8 .col-sm-6
  
  class="col-xs-4 col-sm-6"> Level 2: .col-xs-4 .col-sm-6
  
  
  
  
  
  
  class="modal-footer">
  
  type="button"
  class="btn btn-default"
  data-dismiss="modal">Close
  
  type="button"
  class="btn btn-primary">Save changes
  
  
  
  
  
  class="bd-example bd-example-padded-bottom">
  
  type="button"
  class="btn btn-primary btn-lg"
  data-toggle="modal"
  data-target="#gridSystemModal"> Launch demo modal
  

  Зміни модального вікна Контенту, заснованого на кнопку пуску

  Є купа кнопок, викликає модальне вікно, просто з трохи різним змістом? Використовуйте event.relatedTarget і HTML data-* атрибути (можливо через jQuery) варіювати вміст модального вікна залежно від того, яка кнопка була натиснута. Див докладні відомості в документації Модальних подій relatedTarget.

  New message

  
  class="bd-example">
  
  type="button"
  class="btn btn-primary"
  data-toggle="modal"
  data-target="#exampleModal"
  data-whatever="@mdo">Open modal for @mdo
  
  type="button"
  class="btn btn-primary"
  data-toggle="modal"
  data-target="#exampleModal"
  data-whatever="@fat">Open modal for @fat
  
  type="button"
  class="btn btn-primary"
  data-toggle="modal"
  data-target="#exampleModal"
  data-whatever="@getbootstrap">Open modal for @getbootstrap
  
  class="modal fade"
  id="exampleModal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="exampleModalLabel"
  aria-hidden ="true">
  
  class="modal-dialog"
  role="document">
  
  class="modal-content">
  
  class="modal-header">
  
  type="button"
  class="close"
  data-dismiss="modal"
  aria-label="Close">
  
  aria-hidden ="true">×
  
  
  
  class="modal-title"
  id="exampleModalLabel">New message
  
  
  class="modal-body">
  
  class="form-group">
  
  for="recipient-name"
  class="form-control-label">Recipient:
  
  type="text"
  class="form-control"
  id="recipient-name">
  
  
  class="form-group">
  
  for="message-text"
  class="form-control-label">Message:
  
  class="form-control"
  id="message-text">
  
  
  
  
  class="modal-footer">
  
  type="button"
  class="btn btn-secondary"
  data-dismiss="modal">Close
  
  type="button"
  class="btn btn-primary">Send message
  
  
  
  
  

  $('#exampleModal').on('show.bs.modal',
  function
  (event)
  
  var
  button
  =
  $(event.relatedTarget)
  // Кнопка, що спровокувало модальне вікно
  var
  recipient
  =
  button.data('whatever')
  // Вилучення інформації з даних-* атрибутів
  // Якщо необхідно, ви могли б почати тут AJAX-запит (і виконайте оновлення зворотного виклику).
  // Оновлення модального вікна Контенту. Ми будемо використовувати jQuery тут, але натомість можна використовувати прив'язки даних бібліотеки або інших методів.
  var
  modal
  =
  $(this)
  modal.find('.modal-title').text('New message to '
  +
  recipient)
  modal.find('.modal-body input').val(recipient)
  >)

  Модальні вікна з динамічної висоти

  Якщо Висота модальне вікно зміни під час її відкриття, Вам необхідно зателефонувати $('#myModal').data('bs.modal').handleUpdate() підрегулювати модальне вікно позиції в разі з'являється смуга прокручування.

  Використання

  У модальне вікно плагін перемикає ваш прихований Контент на вимогу через атрибути даних або JavaScript. Він також додає .modal-open на за промовчанням прокрутка поведінка і створює .modal-backdrop , щоб забезпечити клацніть область для звільнення показані модальні дієслова при натисканні поза модальне вікно.

  За допомогою даних атрибутів

  Активуйте модальне вікно без запису JavaScript. Набір data-toggle="modal" на елемент контролера, кнопки, разом з data-target="#foo" або href="#foo" , щоб призначатися для певного модального вікна для перемикання.

  
  type="button"
  data-toggle="modal"
  data-target="#myModal">Launch modal
  

  Через JavaScript

  Виклик модальне вікно з кодом myModal З одного рядка JavaScript:

  Варіанти

  Параметри можуть надсилатися через атрибути даних або JavaScript. Для атрибутів даних введіть назву параметра data- , а на data-backdrop="" .

  Ім'я	Тип	За замовчуванням	Опис
  backdrop	boolean or the string 'static'	true	Включає модальне вікно-фон елемента. Крім того, вкажіть static, на тлі якого не закрити модне вікно по клацанню.
  keyboard	boolean	true	Замикає модальне вікно При натисканні клавіші Escape
  show	boolean	true	Показує модальне вікно при ініціалізації.

  Методи

  .modal(options)

  Активує ваш контент у модальне вікно. Приймає необов'язкові варіанти object.

  $('#myModal').modal( keyboard:
  false
  >)

  .modal('toggle')

  Перемикання вручну на модальне вікно. Повертає абоненту до модального вікна фактично було показано або приховано (Тобто shown.bs.modal або hidden.bs.modal події).

  .modal('show')

  Вручну відчиняє модальне вікно. Повертає абоненту до модального вікна фактично було показано (Тобто shown.bs.modal події).

  .modal('hide')

  Вручну приховує модальне вікно. Повертає абоненту до модального вікна Насправді був прихованим (Тобто hidden.bs.modal події).

  Події

  Bootstrap модальне вікно клас надає кілька подій для навішування функціональності модальне вікно. Все модальне вікно події обстріляли модальне вікно як така (т. е. ).

  Тип Події	Опис
  show.bs.modal	Ця подія виникає відразу ж, коли show спосіб екземпляра називається. Якщо викликається клацанням, клацніть елемент, як відносятьсятакількість властивість події.
  shown.bs.modal	Ця подія запускається, коли модальне вікно стало видимим для користувача (чекатиме CSS переходи для завершення). Якщо викликається клацанням, клацніть елемент як позначенийнастройку властивість події.
  hide.bs.modal	Ця подія відразу виконується, коли викликається екземпляр методу hide .
  hidden.bs.modal	Ця подія запускається, коли модальне вікно перестав бути прихована від користувача (буде чекати CSS переходи для завершення).

  $('#myModal').on('hidden.bs.modal',
  function
  (e)
  
  // зробити щось.
  >)

  Спроектовані та побудовані з усією любов'ю у світі @mdo та @fat. Підтримується головною командою за допомогою наших спонсорів.

  Зараз v4.0.0-alpha.4. Код ліцензії MIT, документи CC BY 3.0.