Почему модальное окно bootstrap 4.5 ведет себя иначе?

Question

[Kristina8787]

Здравствуйте! Столкнулась с двумя проблемами при разработке на битриксе. Мне надо чтобы при клике всплывало модальное окно,затемнялся задний фон, блокировалась прокрутка того что позади модального окна,и перед глазами было это самое окно. В обычной разработке всё это работает буквально парой строчек кода, например вот jsfiddle.net/d6pemL7j/4 . Но в битриксе, облако, модалка всплывает вверху страницы, нужно до него добираться скроллом из места где был клик, задний фон того что за модалкой не затемняется, и как я уже сказала модальное окно появляется не перед глазами а где то вверху самом страницы. Пробовала бороться с этим строчкой кода $('html,body').animate({scrollTop: $('#letsscroll').offset().top+'px'}, 400); чтобы просто нас кидало вверх страницы после клика, но это не работает в битриксе почему то. Подскажите как побороть это и куда копать?

Comments

[Андрей Николаев]

Лучшим примером будет скриншот. Можете приложить?

Answer 1

[Нодир Маликов]

https://getbootstrap.com/docs/5.0/components/modal...
https://getbootstrap.com/docs/5.0/components/modal...

вот пример

<!-- Vertically centered modal -->
    <div class="modal fade" id="download" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content text-center">
                <div class="modal-header">
                    <h5 class="modal-title bold-text" id="staticBackdropLabel">Скачать Orient Taxi</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p style="color: #000;">Для Android:</p>
                    <div class="d-flex justify-content-center align-items-center">
                        <a target="_blank"
                            href="https://play.google.com/store/apps/details?id=uz.orienttaxi.client"><img
                                src="../img/gp.png" alt="play market">
                        </a>
                    </div>
                    <p style="color: #000;">Для iOS:</p>
                    <div class="d-flex justify-content-center align-items-center">
                        <a target="_blank" href="https://apps.apple.com/ru/app/id1539592266"><img src="../img/ap.png"
                                alt="app store"></a>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Закрыть</button>
                </div>
            </div>
        </div>
    </div>

Comments

[Kristina8787]

это уже 5.0

[Нодир Маликов]

Kristina8787, https://getbootstrap.com/docs/4.5/components/modal...

[Kristina8787]

Нодир Маликов, это просто размещает по центру документа модалку. я знаю этот класс. без него вне битрикса24 модалка также ровно перед глазами всплывает и выполняет то что я написала, а в битриксе как будто отсекается это

[Kristina8787]

Нодир Маликов, грубо говоря окей модалка всплывет в центре документа, но остальное свойства типо затменения заднего фона того что позади модалки и блокирование скролла того что позади модалки не происходит