1

提前感谢您提供的任何建议！我有一个在我的网站的桌面版本上运行良好的叠加层。但是，当我设计用于移动设备的叠加层时，它给我带来了问题。这是jfiddle：

http://jsfiddle.net/kevindp78/bs3FT/1/

代码如下。当我在移动视图中尝试此操作时，内容似乎出现在错误的级别（可能低于#fixedoverlay 但高于#overlaymatte？）基本上，由于某种原因，我无法与#overlaycontent 中的内容进行交互。它上面有一层深色背景，div 顶部只有一条白色。有任何想法吗？谢谢！

我的 CSS：

#fixedoverlay, #overlaymatte {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
opacity: 0.7;
filter: alpha(opacity=70);
z-index: 999;
}

#overlaycontent {
position: relative;
width: 960px;
margin: 25px auto;
max-height: 75%;
overflow: auto;
background: #fff;
padding: 20px;
/*  border: 20px solid #fff; */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
z-index: 9999;
}


#overlaymatte {
background: none;
}

我的 HTML

<div id="fixedoverlay">
 <div id="overlaymatte"></div>
<div id="overlaycontent">
    <div><p>Here's my content</p><p>Here's my content</p><p>Here's my content</p><p>Here's my     content</p><p>Here's my content</p></div>
</div>
</div>
4

1 回答 1

0

抱歉，这是与我正在使用的移动设计软件（Mobify）相关的 HTML 和 javascript 问题的结果。本质上，我有一些 javascript 会自动附加覆盖：

function popUpOverlay(){
        $('body').append('<div id="fixedoverlay"><div id="overlaymatte"></div><a title="close" href="#" class="closeoverlay">Close</a><div id="overlaycontent"></div></div>');
        $('#overlaycontent').append(loaderimg);
        $('#loaderimg').show();
        $(window).keydown(function(e){
            if(e.keyCode == 27) {
                $('#fixedoverlay').remove();
            }
        })
    }

我的问题是我在整个网站上应用了 Javascript 两次：一次是通过参考链接在文档的头部，一次是通过 Mobify 的全局选择/脚本功能。由于 javascript 被应用了两次，我实际上看到了覆盖的两个实例：一个在另一个之上。我修复了 javascript，因此只发生了一个实例，问题不再发生。

于 2013-03-04T13:55:19.423 回答