Модал не создается должным образом по центру при прокрутке.Не появляется в середине окна просмотра

Question

Проблема в том, что модал всегда выскакивает посередине «итоговой» страницы. См. Изображение .

Я использую Карусель Bootstrap, которая, когда вы щелкаете по активному image.jpg, показывает image-fullsize.jpg, используя Модальность Bootstrap.Изображение, показанное на Карусели и Модале, работает отлично, проблема в позиции появления Модала.Похоже, что он всегда появляется в одной и той же (x, y) позиции, независимо от того, где вы находитесь на странице.

Я бы хотел продолжить использовать этот подход Карусель-Модал, но, возможно, это не лучший метод.Я выслушаю любое решение!

Вот код карусели:

<div id="carouselID" class="carousel slide"  data-interval="false">
    <div class="carousel-inner" style="cursor: pointer;" role="listbox"  data-toggle="modal" data-target="#exampleModal">
        <img src="image.jpg">
        <img src="image2.jpg">
        <img src="image3.jpg">
    </div>
</div>

Вот модальный код:

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-full modal-xl" role="document"> //FullScreen-ish Modal
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">ASDFASDF</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <img id="carousel_clicked_img"> //I use Jquery to show the correct fullsize-image.jpg
            </div>
        </div>
    </div>
</div>

Я уже пробовал добавить modal-dialog-centered вместе с modal-dialog и пробовал:

 .modal-dialog {
    position: absolute; //If I use fixed the Modal always spawns at the bottom of the page
    top: 50%; //If i use 80% it gives me a scrolleable-ish semi-broken modal that spawns below desired position
    left: 50%;
    transform: translate(-50%, -50%) !important;
} 

, и я пробовал сотни рекомендуемых решений и ничего не получил.

Answer 1

Изменить position свойство на fixed

.modal-dialog {
  position: fixed;
  top: 50%; //If i use 80% it gives me a scrolleable-ish semi-broken modal that spans below desired position
  left: 50%;
  transform: translate(-50%, -50%) !important;
}