Как сделать модалку в модалке(bootstrap)?

Bootstrap CSS HTML

1 ответ

У меня есть модальное окно и в нем при нажатий на кнопку "отправить" нужно чтобы открылось другое модальное окно(мол результат что получилось). Прошу помочь дописать код, нужно сделать еще модалку. Модалка из bootstrap, пробовал сам ничего не получилось...

&lt;div class="modal fade" id="Modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"&gt;     &lt;div class="modal-dialog"&gt;       &lt;div class="modal-content modal-sm"&gt;         &lt;div class="modal-body"&gt;           &lt;button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"&gt;&lt;/button&gt;             &lt;div class="about_buy_title"&gt;               &lt;h2&gt;Заказать устройство&lt;/h2&gt;             &lt;/div&gt;             &lt;div class="about_buy_form"&gt;               &lt;form class="form_modal"&gt;                 &lt;div class="form_group"&gt;                   &lt;input type="text" id="name" name="name" placeholder="Имя*"&gt;                 &lt;/div&gt;                                &lt;div class="form_group"&gt;                   &lt;input type="text" id="phone" name="phone" placeholder="Номер телефона*"&gt;                 &lt;/div&gt;                                &lt;div class="form_group"&gt;                   &lt;input type="text" id="contact" name="contact" placeholder="Удобный способ связи*"&gt;                   &lt;div class="find find_modal"&gt;&lt;/div&gt;                   &lt;div class="connect_active form_connect_active connect_active_modal"&gt;                     &lt;a href="" class="connect_link"&gt;&lt;span class="modal_icon modal_whatsapp_icon"&gt;&lt;/span&gt;&lt;p&gt;WhatsApp&lt;/p&gt;&lt;/a&gt;                     &lt;a href="" class="connect_link"&gt;&lt;span class="modal_icon modal_telegram_icon"&gt;&lt;/span&gt;&lt;p&gt;Telegram&lt;/p&gt;&lt;/a&gt;                     &lt;a href="" class="connect_link"&gt;&lt;span class="modal_icon modal_phone_icon"&gt;&lt;/span&gt;&lt;p&gt;Звонок на мобильный телефон&lt;/p&gt;&lt;/a&gt;                   &lt;/div&gt;                 &lt;/div&gt;                 &lt;div class="form_group"&gt;                   &lt;input type="text" id="device_modal" class="input_val" name="device" placeholder="Bitmain Antminer S19j Pro"&gt;                   &lt;div class="find_devices find_devices_modal"&gt;&lt;/div&gt;                   &lt;div class="value_changer"&gt;                     &lt;button class="value_minus" type="button" style="color:#CFCFCF"&gt;-&lt;/button&gt;                     &lt;div class="value_count"&gt;1&lt;/div&gt;                     &lt;button class="value_plus" type="button"&gt;+&lt;/button&gt;                   &lt;/div&gt;                   &lt;div class="form_search form_search_modal"&gt;                     &lt;ul&gt;                       &lt;li class="search_device search_device_modal"&gt;&lt;a href="#"&gt;Bitmain Antminer S19j Pro&lt;/a&gt;&lt;/li&gt;                       &lt;li class="search_device search_device_modal"&gt;&lt;a href="#"&gt;Super Bitmain Antminer S19j Pro&lt;/a&gt;&lt;/li&gt;                       &lt;li class="search_device search_device_modal"&gt;&lt;a href="#"&gt;Duper Bitmain Antminer S19j Pro&lt;/a&gt;&lt;/li&gt;                       &lt;li class="search_device search_device_modal"&gt;&lt;a href="#"&gt;Puper Bitmain Antminer S19j Pro&lt;/a&gt;&lt;/li&gt;                       &lt;li class="search_device search_device_modal"&gt;&lt;a href="#"&gt;Luper Bitmain Antminer S19j Pro&lt;/a&gt;&lt;/li&gt;                     &lt;/ul&gt;                   &lt;/div&gt;                 &lt;/div&gt;                              &lt;/form&gt;               &lt;button type="button" class="form_add_device form_add_device_modal"&gt;+ добавить устройство&lt;/button&gt;             &lt;/div&gt;                        &lt;div class="about_buy_send"&gt;               &lt;button type="button" class="send send_modal" data-bs-dismiss="modal" aria-label="Закрыть" data-toggle="modal" data-target="#Modal_send"&gt;отправить&lt;/button&gt;               &lt;span class="about_buy_warn"&gt;Нажимая кнопку “Отправить заявку”, вы принимаете &lt;a href=""&gt;условия передачи персональных данных&lt;/a&gt;&lt;/span&gt;             &lt;/div&gt;                      &lt;/div&gt;         &lt;/div&gt;       &lt;/div&gt;     &lt;/div&gt;   &lt;/div&gt;

<div class="modal fade" id="Modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content modal-sm"> <div class="modal-body"> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button> <div class="about_buy_title"> <h2>Заказать устройство</h2> </div> <div class="about_buy_form"> <form class="form_modal"> <div class="form_group"> <input type="text" id="name" name="name" placeholder="Имя*"> </div> <div class="form_group"> <input type="text" id="phone" name="phone" placeholder="Номер телефона*"> </div> <div class="form_group"> <input type="text" id="contact" name="contact" placeholder="Удобный способ связи*"> <div class="find find_modal"></div> <div class="connect_active form_connect_active connect_active_modal"> <a href="" class="connect_link"><span class="modal_icon modal_whatsapp_icon"></span><p>WhatsApp</p></a> <a href="" class="connect_link"><span class="modal_icon modal_telegram_icon"></span><p>Telegram</p></a> <a href="" class="connect_link"><span class="modal_icon modal_phone_icon"></span><p>Звонок на мобильный телефон</p></a> </div> </div> <div class="form_group"> <input type="text" id="device_modal" class="input_val" name="device" placeholder="Bitmain Antminer S19j Pro"> <div class="find_devices find_devices_modal"></div> <div class="value_changer"> <button class="value_minus" type="button" style="color:#CFCFCF">-</button> <div class="value_count">1</div> <button class="value_plus" type="button">+</button> </div> <div class="form_search form_search_modal"> <ul> <li class="search_device search_device_modal"><a href="#">Bitmain Antminer S19j Pro</a></li> <li class="search_device search_device_modal"><a href="#">Super Bitmain Antminer S19j Pro</a></li> <li class="search_device search_device_modal"><a href="#">Duper Bitmain Antminer S19j Pro</a></li> <li class="search_device search_device_modal"><a href="#">Puper Bitmain Antminer S19j Pro</a></li> <li class="search_device search_device_modal"><a href="#">Luper Bitmain Antminer S19j Pro</a></li> </ul> </div> </div> </form> <button type="button" class="form_add_device form_add_device_modal">+ добавить устройство</button> </div> <div class="about_buy_send"> <button type="button" class="send send_modal" data-bs-dismiss="modal" aria-label="Закрыть" data-toggle="modal" data-target="#Modal_send">отправить</button> <span class="about_buy_warn">Нажимая кнопку “Отправить заявку”, вы принимаете <a href="">условия передачи персональных данных</a></span> </div> </div> </div> </div> </div> </div>

Дополнительно:

В документации есть пример https://getbootstrap.com/docs/5.2/components/modal...

спасибо

Ответы:

можешь попробовать мой вариант с переключением модалок https://getbootstrap.com/docs/5.2/components/modal...

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Елена Вебер Ответ

Для создания модального окна внутри другого модального окна при использовании Bootstrap, вам нужно следовать определенной структуре и правилам.

1. Добавьте основное модальное окно, которое будет содержать в себе второе модальное окно. Для этого используйте следующий код:

<div class="modal fade" id="mainModal" role="dialog" aria-labelledby="mainModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="mainModalLabel">Main Modal</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- Content for main modal goes here -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#nestedModal">Open Nested Modal</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="mainModal" role="dialog" aria-labelledby="mainModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="mainModalLabel">Main Modal</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body">  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#nestedModal">Open Nested Modal</button> </div> </div> </div> </div>

2. Далее, добавьте второе модальное окно (вложенное), которое будет отображаться внутри основного модального окна. Для этого используйте следующий код:

<div class="modal fade" id="nestedModal" role="dialog" aria-labelledby="nestedModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="nestedModalLabel">Nested Modal</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- Content for nested modal goes here -->
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="nestedModal" role="dialog" aria-labelledby="nestedModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="nestedModalLabel">Nested Modal</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body">  </div> </div> </div> </div>

3. Для того чтобы вложенное модальное окно отображалось внутри основного модального окна, вам нужно добавить небольшой скрипт на JavaScript, который будет управлять открытием и закрытием вложенного модального окна. Используйте следующий код:

 
  $('#mainModal').on('hidden.bs.modal', function (e) {
    if($('.modal.show').length &gt; 0){
      $('body').addClass('modal-open');
    }
  });

$('#mainModal').on('hidden.bs.modal', function (e) { if($('.modal.show').length > 0){ $('body').addClass('modal-open'); } });

После добавления всех необходимых элементов, вложенное модальное окно должно открываться внутри основного модального окна при нажатии на кнопку "Open Nested Modal".

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

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов code-review Нужен ли код-ревью React/TypeScript проекта? 0 ответов

Как сделать модалку в модалке(bootstrap)?

Дополнительно:

Ответы:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно