Mobile CSS Overlay Not Appearing Correctly - css

Question

Thanks in advance for any advice you can offer! I've got an overlay that works well on a desktop version of my website. However, when I design the overlay for use on a mobile, it gives me problems. Here's the jfiddle:
http://jsfiddle.net/kevindp78/bs3FT/1/
Code is below. When I try this in a mobile view, the content seems to be appearing at the wrong level (maybe below the #fixedoverlay but above the #overlaymatte?) Basically, I can't interact with the content in the #overlaycontent for some reason. It's got a layer of dark background over it, and there's only a strip of white at the top of the div. Any ideas? Thanks!
My 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;
}
My 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>

Answer 1

Apologies, but this is the result of an HTML and javascript issue related to the mobile design software I am using (Mobify.) Essentially, I have a bit of javascript that automatically appends the overlay:
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();
}
})
}
My problem was that I was applying Javascript twice throughout the website: once in the head of the document through a reference link, and once through Mobify's Global Selections / Script feature. Since javascript was being applied twice, I was actually seeing two instances of the overlay: one on top of the other. I fixed the javascript so that only one instance occurred, and the problem no longer happens.