Bootstrap модально закодировано внутри формы - визуализируется с моделью, затем за пределами формы - PullRequest
0 голосов
/ 15 февраля 2020

У меня есть стандартная форма приложения Rails с вложенными атрибутами. У меня слишком много полей во вложенных атрибутах, поэтому я решил создать модальное окно для них через Bootstrap. Это выглядит примерно так:

<body>
  <form>
    <div id="modal" class="modal">
      modal form input fields
    </div>
  </form>
</body> 

Проблема, с которой я столкнулся, заключается в том, что при рендеринге в браузере я получаю следующее:

<body>
  <form>
  </form>
  <div id="modal" class="modal">
    modal form input fields
  </div>
</body>

Все модальные дивы перемещаются в конец тело и, следовательно, входные данные не представлены с формой. Модалы работают просто отлично.

После поиска я наткнулся на это (позиция: исправлена):

https://getbootstrap.com/docs/4.0/components/modal/

Не знаю если это связано, но стоит упомянуть. Кто-нибудь еще видел это? Кажется, я не могу найти другую связанную проблему, но могу легко использовать неправильные поисковые термины и т. Д. c.

ОБНОВЛЕНИЕ

Поискивать код BS:

   // Move modal to body
    // Fix Bootstrap backdrop issue with animation.css

    // MOD Keeps the modals in place so you can hide them in a form

    $('.modal').appendTo("body");

Теперь - мысли о том, как это предотвратить? Если бы это был один модал, я бы просто переместил его назад. Проблема в том, что у меня несколько модалов (по одному на каждый вложенный атрибут, который может быть> 0). Я могу представить себе эту работу (ie. Перемещая их всех назад), но в идеале подавить это было бы лучше (проще).

1 Ответ

0 голосов
/ 15 февраля 2020

Учитывая мою ситуацию, я решил просто переместить div назад. Это было не так уж плохо:

<body>
  <form>
    <table>
      <tr>
        <td class="modal_id_1">
          <div id="modal_id_1" class="modal">
            modal form input fields
          </div>
        </td>
        <td class="modal_id_2">
          <div id="modal_id_2" class="modal">
            modal form input fields
          </div>
        </td>
      </tr>
    </table>
  </form>
</body>

После возрастной нагрузки модальные div перемещаются в конец тела. Я сделал это:

  $('.item_modal').each(function() {
    $(this).appendTo("td." + $(this).attr('id'));

Открыто для лучших ответов - спасибо тем, кто прокомментировал 100

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...