Why bootstrap 4.5 modal window behaves differently?

Question

JavaScript

Hello! Faced two problems when developing on Bitrix. I need a modal window to pop up when clicked, darken the background, block the scrolling of what is behind the modal window, and have this very window in front of my eyes. In normal development, all this works with just a couple of lines of code, for example here jsfiddle.net/d6pemL7j/4. But in Bitrix, a cloud, a modal pops up at the top of the page, you need to get to it by scrolling from the place where the click was, the background of what is behind the modal is not dimmed, and as I said, the modal window does not appear in front of your eyes, but somewhere at the very top of the page. I tried to deal with this line of code $('html,body').animate({scrollTop: $('#letsscroll').offset().top+'px'}, 400); to just throw us to the top of the page after a click, but this does not work in Bitrix for some reason. Tell me how to overcome this and where to dig?

Answer 1

https://getbootstrap.com/docs/5.0/components/modal...
https://getbootstrap.com/docs/5.0/components/modal...
here is an example

<!-- 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>