Всплывающее модальное (исправлено) появляется в Safari за верхним и нижним колонтитулом - PullRequest
Новая
       52

Всплывающее модальное (исправлено) появляется в Safari за верхним и нижним колонтитулом

0 голосов
/ 24 октября 2019

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

У меня есть контактная форма, всплывающая модальная форма (исправлено), которая отлично работает наChrome, Mozilla, IE. Когда я открываю его в Safari (Mobile, Ipad, Mac и т. Д.), Это исправляется, поэтому, когда я прокручиваю вверх или вниз, он оказывается позади верхнего и нижнего колонтитула. Размер экрана недостаточно велик, чтобы увеличить поля, и даже когда я это делаю, прокрутка по-прежнему показывает его за элементами верхнего / нижнего колонтитула.

Похоже, что safari не любит фиксированные элементы, я пробовал z-index(установив нижний колонтитул и заголовок в 0 и даже -1 и установив модал намного выше), что не сработало, и я также попытался -webkit-transform: translate3d (0,0,0)! важный, что многие другие, кажется, делают, но этоне делает трюк. Есть что-то, чего я здесь не хватает? Я, к сожалению, пока не могу дать прямую ссылку на сайт, но надеюсь, что кто-то сможет указать мне правильное направление.

Большое спасибо за помощь! 

HTML:
<div id="myModal" class="modal" style="display: block;">
    <div class="modal-content">
    <span class="close">×</span><h4>Form Title</h4>
    /* form goes here*/
    </div>
    </div>

CSS:

.modal{display:none;position:fixed;z-index:1;padding-top:100px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.4);}
.modal-content{background-color:#fefefe;margin:auto;padding:20px;border:1px solid #888;width:80%;}

.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;display:none;overflow:hidden;-webkit-overflow-scrolling:touch;outline:0;}
.modal-content{position:relative;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #999;border:1px solid rgba(0,0,0,.2);border-radius:6px;outline:0;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5);}

div.widget.mod-inner div.mod-content ul{list-style:none;padding-left:0px;}
.single div.widget.mod-container.my_custom_widget-7.widget_my_custom_widget.clearfix .modal{background:rgba(0,0,0,0.4);padding-top:40px;overflow:auto;}
.single div.widget.mod-container.my_custom_widget-7.widget_my_custom_widget.clearfix .modal-content{max-width:600px;margin-left:auto;margin-right:auto;margin-top:10px;margin-bottom:10px;padding:20px;}

Только что добавил код. Я пытался удалить все, что не имеет отношения (пожалуйста, прости меня, я не слишком хорош с этим материалом) Пожалуйста, дайте мне знать, если я не добавляю этот код правильно, чтобы я мог это исправить. Еще раз большое спасибо за помощь

...