JQuery Modal не поддерживается на устройствах iOS ниже 17 версий. ⇐ Jquery

[Anonymous]

Я пытаюсь открыть модальное окно на всех устройствах с помощью HTML, CSS, jQuery. Но проблема в том, что в устройствах iOS ниже 17 модели не отображается. когда я нажимаю на кнопку, модальное окно на самом деле открывается в консоли, но на самом деле я не вижу его на устройствах IOS.

У кого-нибудь есть решение этой проблемы, пожалуйста, помогите мне.

$(document).ready(function () { $('.get_btn').on('click', function (e) { openModalSequence (1); // Начинаем с первого шага при нажатии кнопки }); // Функция, позволяющая показать конкретный шаг и скрыть другие функция showStep(stepIndex) { $('.box').hide(); $(`#step${stepIndex}`).show(); } функция openModalSequence(индекс) { showStep (индекс); $('.model_next').on('click', function (e) { е.preventDefault(); openModalSequence (индекс + 1); //Открываем следующий шаг по нажатию кнопки «Далее» }); $('.model_previous').on('click', function (e) { е.preventDefault(); openModalSequence (индекс - 1); // Открытие предыдущего шага по нажатию кнопки «Предыдущий» }); } }); .box { высота: 90%; ширина: 90%; фоновое изображение: URL(../img/getin_bg.webp); фоновая позиция: центр; фоновый повтор: без повтора; размер фона: обложка; дисплей: гибкий; гибкое направление: столбец; разрыв: 120 пикселей; размер коробки: граница-коробка; радиус границы: 5 пикселей; выравнивание текста: по центру; отступ: 20 пикселей !важно; позиция: абсолютная; верх: 70%; осталось: 50%; трансформировать: транслировать(-50%, -50%); переход: 0,3 с; z-индекс: 9999; } .model_logo { ширина: 100%; дисплей: гибкий; оправдание-содержание: пространство между; } .model_logo изображение { высота: 70 пикселей; ширина: авто; } .model_text { дисплей: гибкий; гибкое направление: столбец; разрыв: 20 пикселей; выровнять-элементы: начало; отступ слева: 300 пикселей; отступ справа: 300 пикселей; выравнивание текста: по левому краю; } .model_text .h1 { размер шрифта: 30 пикселей; } .model_text шрифт { цвет: вар (--mdblue); } .model_text ввод { граница: нет; контур: нет; border-bottom: 1px var(--light_blue) Solid; размер шрифта: 24 пикселей; цвет фона: прозрачный; цвет: вар (--mdblue); ширина: 99%; } .model_text текстовая область { ширина: 100%; граница: нет; контур: нет; border-bottom: 1px var(--light_blue) Solid; цвет фона: прозрачный; цвет: вар (--mdblue); } .model_text ввод::placeholder { цвет: var(--mdblue) !важно; } .model_next { граница: нет; размер шрифта: 16 пикселей; маржа сверху: 50 пикселей; цвет фона: var (--dark_blue); белый цвет; отступ: 10 пикселей 80 пикселей; радиус границы: 50 пикселей; переход: .3с; } .model_next:hover { цвет фона: var (--light_blue); } .left_right_btn { левое поле: 80%; дисплей: гибкий; разрыв: 20 пикселей; } .model_left { цвет фона: var (--dark_blue); цвет: вар(--белый); отступ: 15 пикселей 18 пикселей; граница-верхний левый радиус: 10 пикселей; граница-нижний-левый радиус: 10 пикселей; размер шрифта: 20 пикселей; курсор: указатель; } .model_right { цвет фона: var (--dark_blue); цвет: вар(--белый); отступ: 15 пикселей 18 пикселей; граница-верхний-правый-радиус: 10 пикселей; граница-нижний-правый-радиус: 10 пикселей; размер шрифта: 20 пикселей; курсор: указатель; } .модальный { положение: фиксированное; верх: 0 пикселей; события указателя: нет; слева: 0 пикселей; фон: исчезать (#333, 90); ширина: 100vw; высота: 100вх; z-индекс: 1000; непрозрачность: 0; переход: 0,3 с; &.активный { непрозрачность: 1; события указателя: авто; .коробка { верх: 50%; } } &#успех { ч1 { размер шрифта: 1,5em; } } .закрывать { размер шрифта: 20 пикселей; вес шрифта: 900; курсор: указатель; цвет: вар (--mdblue); } } @media (макс. ширина: 1300 пикселей) { .model_text { дисплей: гибкий; гибкое направление: столбец; разрыв: 20 пикселей; выровнять-элементы: начало; отступ слева: 100 пикселей; отступ справа: 100 пикселей; выравнивание текста: по левому краю; } .коробка { разрыв: 100 пикселей; } } @media (максимальная ширина: 768 пикселей) { .left_right_btn { поле слева: 70%; дисплей: гибкий; разрыв: 20 пикселей; } .model_left { размер шрифта: 16 пикселей; отступ: 10 пикселей 15 пикселей; } .model_right { размер шрифта: 16 пикселей; отступ: 10 пикселей 15 пикселей; } .model_text { ширина: 99%; отступ: 0 20 пикселей; } .model_text .h1 { размер шрифта: 20 пикселей; } .коробка { разрыв: 120 пикселей; z-индекс: 9999; } 1 Как ваше имя?* Далее Далее

$(документ).ready(функция () { $('.get_btn').on('click', function (e) { openModalSequence (1); // Начинаем с первого шага при нажатии кнопки });
// Функция, позволяющая показать конкретный шаг и скрыть другие функция showStep(stepIndex) { $('.box').hide(); $(`#step${stepIndex}`).show(); } функция openModalSequence(индекс) { showStep (индекс); $('.model_next').on('click', function (e) { е.preventDefault(); openModalSequence (индекс + 1); //Открываем следующий шаг по нажатию кнопки «Далее» }); $('.model_previous').on('click', function (e) { е.preventDefault(); openModalSequence (индекс - 1); // Открытие предыдущего шага по нажатию кнопки «Предыдущий» }); } });