Добавьте два модальных контента внутри bootstrap модальных - PullRequest
Новая
       14

Добавьте два модальных контента внутри bootstrap модальных

1 голос
/ 31 марта 2020

Я пытаюсь добавить два modal-content деления внутри одного modal. 

<div class="modal fade" id="user_manage_modal" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog">
         <!-- Assign Users -->
             <div class="modal-content">...</div>
         <hr>
         <!-- UnAssign Users -->
             <div class="modal-content">...</div>
    </div>
</div>

Это выглядит великолепно, но я хотел добавить горизонтальную линию между двумя modal-content делениями.

И результат выглядит следующим образом: modal-img

Я не добавил для этого никаких дополнительных css.

Ожидается простая горизонтальная линия в между:

enter image description here Это потому, что несколько modal-contents не разрешены внутри bootstrap modal?

1 Ответ

1 голос
/ 31 марта 2020

Вам придется сделать все ваши стили (так как вы не дали остальной код) внутри модального контента 

<div class="modal fade" id="user_manage_modal" data-keyboard="false" data-backdrop="static">
   <div class="modal-dialog">
        <div class="modal-content">
            <!-- Assign Users -->
           <hr>
          <!-- UnAssign Users -->
      </div>
  </div>

Поскольку вы дали только фрагмент, знайте следующей структуры = последовательность в bootstrap модальном 

<div class="modal fade" id="Modal-demo" tabindex="-1" role="dialog">
  <div class="modal-dialog" >
    <div class="modal-content"> 
      <div class="modal-header"> optional
      <div class="modal-body"> 
      <div class="modal-footer"> optional

Поскольку эти классы (и прикрепленный код js) должны быть в последовательности (и ожидаются кодом js для применяется один раз на модал) у вас есть два варианта для «специальных целей»

  • Делать все форматирование, прикрепление кнопок в 

    <div class="modal-body">

  • или скопируйте необходимый css в новый класс, такой как 

    <div class="my-modal-content">

    , удалив все нежелательные эффекты и потеряв при этом функцию js (если, конечно, есть некоторые прикрепленные или используйте описание класса)

...