Модальное окно в Bootstrap 4 затемняется и становится неактивным. Как пофиксить?

Question

[Andrej Kopp]

При клике на кнопку затемняется фон и модалка остаётся под этим фоном. Как это можно пофиксить, чтобы модальное окно было за затемнением? Помню были какие-то js фиксы для этого, но сейчас не могу ничего найти. На сайте используется Bootstrap 4.

Comments

[Andrew]

ну у тебя модалка под слоем с затемнением, по идее ей просто z-index нужно другой задать.
В любом случае, по скрину ничего не понятно, давай ссылку или код

Answer 1

[Andrej Kopp]

В общем как оказалось нужно сделать пару правок:

1. Указать идентификатор в свойство data-target="" . У меня это #modalVote.

<button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#modalVote">
       Голосовать
</button>

2. В модальном окне указать идентификатор id="modalVote":

<div class="modal fade" id="modalVote" tabindex="-1" aria-labelledby="modalVoteLabel" data-backdrop="true" aria-hidden="true" role="dialog">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
                <div class="modal-content">
                        <div class="modal-header">
                                <h5 class="modal-title" id="modalVoteLabel">Голосование</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                </button>
                        </div>
                        <div class="modal-body">
                                 ...
                        </div>
                </div>
        </div>
</div>

3. Добавить JS

jQuery(function () {
     jQuery("#modalVote").appendTo("body");
});