Ok so I want to display a Div from inside the page which is hidden, when clicked it fits 1005 width of the page and 100% height with scrolling content, I'm having a few issues with background stuff coming through even after extensive z-index checking and setting, as well as this on scrolling down, once you get to the bottom of the div it seems to scroll down and display the content beneath it which I dont really want it to do. ANyway I'd like to know if there is something a bit more solic, structured or just more efficient than using what i already have. Heres the coding any advice would be much appreciated.
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
<div id="ef" style="display:none; width:100%; height:120%; overflow:scroll; background-color:#f1f1f1; -webkit-overflow-scrolling:touch; z-index:2000; padding-top:43px; "><div id="efmenubars">
<div style="width:50px; height:40px;margin-top:7px; float:left; margin-left:8px;">
</div><span style="display:inline-block; text-align:center; font-family:'helvetica_bqregular'; font-size:20px; color:#333;">Post Enquiry</span>
<a href="#" onclick="toggle_visibility('ef');"> <img src="../images/close.png" width="50px" style="float:right; margin-top:7px; margin-right:8px;" /></a>
</div>
<p>{leftcol}</p></div>
<a class="button2" style="float:right; margin-right:12px; margin-top:19px;" onclick="toggle_visibility('ef');">Post Enquiry</a>
Hope it all makes sense, sorry for the inline css very confusing I know it was a quick job need to clean it up.
Cheers
Ol