时间戳

首页 > 解决方案 > 弹出模式（固定）出现在 safari 上的页眉和页脚后面

css - 弹出模式（固定）出现在 safari 上的页眉和页脚后面

问题描述

似乎很多人都遇到过这个问题，但我尝试了所有我读过的东西，但没有运气......

我有一个联系表单弹出模式表单（固定），它在 Chrome、mozilla、IE 上完美运行。当我在 safari（手机、ipad、mac 等）上打开它时，它是固定的，所以当我向上或向下滚动时，它最终会出现在顶部页眉和页脚的后面。屏幕尺寸不足以增加边距，即使我这样做，滚动仍然会在页眉/页脚元素后面显示它。

似乎 safari 不喜欢固定元素，我尝试了 z-index （将页脚和页眉设置为 0 甚至 -1 并将模态设置得更高），但我也尝试了 -webkit-transform: translate3d(0, 0,0)!important 许多其他人似乎都在这样做，但它并没有起到作用。我在这里缺少什么吗？不幸的是，我还不能提供指向该网站的直接链接，但我希望有人能够指出我正确的方向。

非常感谢您的帮助！

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;}

刚刚添加了代码。我试图删除所有不相关的内容（请原谅我对这些东西不太擅长）如果我没有正确添加此代码，请告诉我，以便我修复它。再次，非常感谢您的帮助

标签： csssafarimobile-safariz-indexfixed

解决方案

推荐阅读