Блог

Главная - Вопросы по программированию - Модальная загрузка с неправильным отображением формы

Модальная загрузка с неправильным отображением формы

#javascript #jquery #bootstrap-4 #modal-dialog #bootstrap-modal

#javascript #jquery #bootstrap-4 #модальный диалог #bootstrap-модальный

Вопрос:

Я создал модальную форму, которая включает форму, запрашивающую информацию о книге. После нажатия кнопки Добавить книгу модальный должен отображаться, чтобы можно было ввести информацию о книге, а после нажатия кнопки добавить введенные данные используются для создания элемента Bootstrap card и добавления его на страницу. Проблема заключается в том, что при нажатии кнопки «Добавить книгу» отображается модальный файл, но он отображается неправильно (он выглядит фрагментированным с заголовком и входными данными, плавающими над содержимым страницы).

  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#add-book-modal">AddBook</button>
        <div class="modal fade" id="add-book-modal" tabindex="-1" aria-labelledby="add-book-modal" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Add a new book</h5>
                    </div>
                </div>
                <div class="modal-body">
                    <form id="add-form">
                        <div class="form-group">
                            <label for="title" class="col-form-label">Title:</label>
                            <input type="text" class="form-control" id="title" name="title">
                        </div>
                        <div class="form-group">
                            <label for="author" class="col-form-label">Author:</label>
                            <input type="text" class="form-control" id="author" name="author">
                        </div>
                        <div class="form-group">
                            <label for="comment" class="col-form-label">Comments:</label>
                            <textarea class="form-control" id="comment" name="comment"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="add">Add</button>
                </div>
            </div>
        </div>

Комментарии:

1. jsfiddle.net/MihajloRashajkovski/3qg082p5/1

2. Скопируйте и вставьте пример со страницы начальной загрузки. Таким образом, вы можете увидеть, есть ли у вас ошибка

Ответ №1:

Мне кажется странным, что div с class=»modal fade» находится внутри button type=»button». Переместите его внутрь контейнера div class=»container».

Метки: