Bootstrap modal не работает на айфонах, но на всех остальных устройствах всё отлично. В чём причина и как исправить?

Question

[DmSS1997]

Использовал bootstrap modal для того, чтобы при нажатии на заявку открывалась полная информация. Но выявилась проблема. На всех устройствах, кроме айфона, всё работает хорошо:


Но с айфона всё ужасно. Модальное окно открывается и всё. Нет возможности ни с чем взаимодействовать и ещё появляется серая пелена:


В чем причина и как исправить?

Вот код модального окна:

<div class="modal fade" id="orderID{{order.id}}" data-bs-backdrop="static"
                         data-bs-keyboard="true"
                         tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="staticBackdropLabel">Полная информация</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="container-fluid ">
                                        <div class="row">
                                            <div class="col-lg-3">
                                                <div class="headerModal">Дата</div>
                                                <p>{{order.data}}</p>
                                            </div>
                                            <div class="col-lg-3">
                                                <div class="headerModal">Город</div>
                                                <p>{{order.city}}</p>
                                            </div>
                                            <div class="col-lg-3">
                                                <div class="headerModal">Вид деятельности</div>
                                                <p>{{order.kind_of_activity}}</p>
                                            </div>
                                            <div class="col-lg-3">
                                                <div class="headerModal">Детали деятельности</div>
                                                <p>{{order.details}}</p>
                                            </div>
                                        </div>
                                        <div class="row mt-2">
                                            <div class="col-lg-3">
                                                <div class="headerModal">Площадь</div>
                                                <p>{{order.square}}</p>
                                            </div>
                                            <div class="col-lg-3">
                                                <div class="headerModal">Требумый этаж</div>
                                                <p>{{order.floor}}</p>
                                            </div>
                                            <div class="col-lg-3">
                                                <div class="headerModal">Требумый район</div>
                                                <p>{{order.district}}</p>
                                            </div>
                                            <div class="col-lg-3">
                                                <div class="headerModal">Бюджет(руб.)</div>
                                                <p>{{order.budget}}</p>
                                            </div>
                                        </div>
                                        <div class="row my-3">
                                            <div class="col-lg-12 text-center">
                                                <h3>Общие пожелания к помещению</h3>
                                                <p>{{order.requirements}}</p>
                                            </div>
                                        </div>
                                        <div class="row mt-5">
                                            <div class="col-lg-12 text-center">
                                                оставьте свои контактные данные:
                                                <br>
                                                <form method="post">
                                                    {% csrf_token %}
                                                    <p>{{form.FIO}}</p>
                                                    <p>{{form.phone}}</p>
                                                    <p>
                                                        <button type="submit" class="btn btn-danger" id="buttonForm">
                                                            Оставить заявку
                                                        </button>
                                                    </p>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Закрыть
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

Comments

[iBird Rose]

попробуй вытащить .modal выше. к примеру вставь прям после открывающего тега body

[inkShio]

мб z-index прописать

Answer 1

[DmSS1997]

Проблема оказалась в расположении модального окна, просто перенес код в блок, где нет никаких тэгов влияющих на позиционирование.

Answer 2

[latush]

Не претендуя на полноту ответа - обновите Bootstrap.

Answer 3

[profesor08]

ИМХО, но компоненты бутстрапа - отстой, как только тебе надо с ними как-то взаимодействовать через код.

Да и пользоваться бутсрапом надо только тогда, когда дизайн полностью заточен под него, и достаточно просто поменять значения переменных, чтоб все стало красиво. А если так не получается, то и тянуть бустрап нет никакого смысла, чтоб потом каждое свойство переопределять.

Что касаемо модалки то в стилях каша из z-index свойств. Ищи где они больше чем у модалки и уменьшай. И модалку располагай где-то перед закрывающим тегом

Answer 4

[Александр]

проверьте стили подключите BS по CDN и скорее всего все будет ок, это ваша локальная проблема