Bootstrap Модал не показывает нижний колонтитул - PullRequest
Новая
       12

Bootstrap Модал не показывает нижний колонтитул

0 голосов
/ 07 марта 2020

Я использую два разных Bootstrap модальных компонента для представления в приложении ASP. NET Core MVC. Для второго модального колонтитула не отображается, хотя разметка очень похожа на первый модальный. Нижний колонтитул первого модального сообщения отображается, как и ожидалось. 

<div class="modal fade" id="firstModal" tabindex="-1" role="dialog" aria-labelledby="firstModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="firstModalTitle">First Modal</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" />
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="secondModal" tabindex="-1" role="dialog" aria-labelledby="secondModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="secondModalTitle">Second Modal</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" />
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

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

$('#button1').click(function (e) {
  var success = doStuff();
  if (success) {
    $('#firstModal').modal('toggle');
  };
});

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#secondModal"></button>

В инструментах веб-разработчика Chrome ошибок нет. Что здесь может быть не так?

1 Ответ

0 голосов
/ 08 марта 2020

Я нашел решение сейчас. В теле модала есть выпадающий список, который заполнен некоторыми Javascript. 

<select class="form-control" />

Изменена разметка на: 

<select class="form-control"></select>

Теперь нижний колонтитул также отображается правильно .

...