移动CSS覆盖未正确显示

提前感谢您提供的任何建议！我有一个覆盖，在我的网站的桌面版本上运行良好。然而，当我为手机设计覆盖时，它给我带来了问题。下面是JFIDLE：

代码如下。当我在移动视图中尝试此操作时，内容似乎出现在错误的级别（可能在#fixedoverlay下面，但在#OverlyMatte上面？），基本上，出于某种原因，我无法与#OverlyContent中的内容交互。上面有一层黑色的背景，在分区的顶部只有一条白色的条纹。有什么想法吗？谢谢

我的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>

这是我的内容这是我的内容这是我的内容

很抱歉，但这是与我正在使用的移动设计软件（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();
            }
        })
    }

函数popUpOverlay（）{
$（'body'）。追加（''）；
$（'#overlycontent'）.append（loaderimg）；
$（'#loaderimg'）.show（）；
$（窗口）.keydown（函数（e）{
如果（e.keyCode==27）{
$（'#fixedoverlay'）。删除（）；
}
})
}

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