Почему модальное окно закрывается при клике на него?

Question

[Chernichko]

На странице есть модальное окно с формой.
Модальное окно появляется, но при попытке заполнить форму (при клике на молаьное окно), м.о. закрывается.

<a href="#" data-toggle="modal" data-target="#ReviewForm" class="btn btn-success">
                    Оставить отзыв
                </a>

    <!-- Modal -->
    <div class="modal fade" id="ReviewForm" tabindex="-1" role="dialog" aria-labelledby="ReviewFormLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="header_feedback_modal">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h5 class="header_feedback_modal-title" id="ReviewFormLabel">Оставить отзыв</h5>
                <div class="header_feedback_modal-form">
                    <div class="form-group">
                        <input type="email" class="reviews-name form-control" placeholder="Ваше имя">
                    </div>
                    <div class="form-group">
                        <input type="text" class="reviews-phone form-control" placeholder="Ваш номер телефона">
                    </div>
                    <div class="form-group">
                        <textarea rows="5" class="reviews-textarea form-control" placeholder="Текст отзыва"></textarea>
                    </div>
                    <input type="button" class="reviews-button btn btn-success" value="Отправить отзыв">
                </div>
            </div>
        </div>
    </div>

Сайт на ларавел, бутстрап подключается в стилях Dmitrijs Balcers '~bootstrap/scss/bootstrap'; и скриптах require('./bootstrap');

Answer 1

[noeer]

Неправильная разметка модального окна.
Где .modal-content ?
Вот образец разметки https://getbootstrap.com/docs/4.3/components/modal/
Сравните.

Comments

[Chernichko]

Спасибо!

Answer 2

[Павел]

Бутстраповские модалки закрываются при нажатии вне контента или на background layout, т.е. затемненный фон, можно предположить что у Вас фон имеет z-index выше чем само окно с контентом.
Попробуйте фон сделать статическим, измените:

<div class="modal fade" id="YouModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="YouModalLabel" aria-hidden="true">

Или скрипту вызова:

$('#YouModal').modal({
  backdrop: 'static',
  keyboard: true
})

Ну или обрабатывайте исчезновение окна:

$('#YouModal').on('hide.bs.modal', function (e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
});