Bootstrap 4.2 - Модальный - поля ввода не редактируются, кнопка не активируется, не закрывается

Question

У меня есть загрузчик 4.2.1 модального открытия по ссылке:

<a href="#" data-toggle="modal" data-target="#inviteByEmailPopup" data-backdrop="false" data-keyboard="false">Add by Email</a>

модальный divв конце, прямо у закрывающего тега тела

<div class="modal fade" tabindex="-1" role="dialog" id="inviteByEmailPopup"  aria-hidden="true" >
    <div class="modal-dialog" role="document" data-backdrop="false">
        <div class="card bg-transparent border-white mt-5">
            <div class="card-header brand-gradient border-white">
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h5 class="text-white text-uppercase">Invite By Email</h5>

            </div>
            <div class="card-body p-3 pb-5 bg-brand-grey">

                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="text-white col-md-12" for="usern1">Name</label>
                            <div class="col-md-12">
                                <input id="inviteName" class="name-input form-control" type="text"  >
                            </div>
                        </div>
                    </div>
                      ~~~ Truncated for brevity only one input kept for example ~~~~
                </div>
            </div>
        </div>
    </div>
</div>

Я пытался:

1. перемещать модально, чтобы избежать какого-либо «фиксированного» наложения контента.
2. Игра с z-индексом, установка модального значения на более высокий z-индекс, чем фон.
3. Я следовал этому руководству: (https://weblog.west -wind.com / posts / 2016 / sep / 14 / bootstrap-модальный-диалог-показ-под-модальный фон ), хотяэто с 2016
4. Я отключил фон с data-backdrop="false" и в моем основном CSS.

.modal-backdrop {
    /* bug fix - no overlay */
    display: none;
}

Я установил плагин z-index для Chrome, чтобы устранить эту проблему. Z-индексы верны. Я рассмотрел переполнение всего стека и попробовал каждый принятый и непринятый ответ здесь. Это не первый день, когда я работаю с Bootstrap и очень разбираюсь в css / html. Это сводит меня с ума.

Answer 1

Вы должны добавить класс модального контента в ваш модал:

Добавить по электронной почте

<div class="modal fade" role="dialog" id="inviteByEmailPopup">
  <div class="modal-dialog">
    <div class="modal-content"  style="background-color: #404041;" >
      <div class="modal-header brand-gradient border-white">
        <div class="brand-gradient border-white">
          <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h5 class="text-white text-uppercase">Invite By Email</h5>
        </div>
      </div>
      <div class="card-body p-3 pb-5 bg-brand-grey">

        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <label class="text-white col-md-12" for="usern1">Name</label>
              <div class="col-md-12">
                <input id="inviteName" class="name-input form-control" type="text"  >
              </div>
            </div>
          </div>
          ~~~ Truncated for brevity only one input kept for example ~~~~
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

Это было решено в процессе устранения неполадок благодаря комментариям.

Во-первых, модальный Bootstrap, ТРЕБУЕТ, что у вас есть <div class="modal-content">...</div> внутри вашего модального, чтобы обернуть ваш контент. Без него z-index и фокусировка на месте.

Спасибо за помощь.