@Kristina8787

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

Здравствуйте! Столкнулась с двумя проблемами при разработке на битриксе. Мне надо чтобы при клике всплывало модальное окно,затемнялся задний фон, блокировалась прокрутка того что позади модального окна,и перед глазами было это самое окно. В обычной разработке всё это работает буквально парой строчек кода, например вот jsfiddle.net/d6pemL7j/4 . Но в битриксе, облако, модалка всплывает вверху страницы, нужно до него добираться скроллом из места где был клик, задний фон того что за модалкой не затемняется, и как я уже сказала модальное окно появляется не перед глазами а где то вверху самом страницы. Пробовала бороться с этим строчкой кода $('html,body').animate({scrollTop: $('#letsscroll').offset().top+'px'}, 400); чтобы просто нас кидало вверх страницы после клика, но это не работает в битриксе почему то. Подскажите как побороть это и куда копать?
  • Вопрос задан
  • 62 просмотра
Пригласить эксперта
Ответы на вопрос 1
Fayo
@Fayo
Притворись дураком 5 минут, чем быть им всю жизнь.
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>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы