I've scoured every corner but still can't find a solution. Here's the situation - I created a popup with an onclick event that overlays my posts wrapper. However, this setup prevents me from scrolling down, so I adjusted the z-index accordingly. While this allowed me to scroll again, clicking on the link causes the popup to appear behind my posts wrapper. No matter how I tweak the z-index values, it either stays hidden behind the wrapper or blocks scrolling when brought to the front. My goal is to have the popup at a lower z-index than the wrapper when not clicked, and a higher z-index when clicked. How can I achieve this? I received the code from a friend, so here it is!
#wrapper{
{block:IndexPage}
width:270px;
{/block:IndexPage}
{block:PermalinkPage}
width:270px;
{/block:PermalinkPage}
margin-top:100px;
margin-right: 250px;
margin-left: auto;
height: 400px;
overflow:scroll;
overflow-x:hidden;
background-color: transparent;
background-repeat: repeat;
margin-bottom:100px;
padding:15px;
border: 3px solid #f3f2f2;
z-index: 300;
}
#popup {
position: fixed;
top:100px;
width:297px;
height:490px;
right: 250px;
font:10px;
opacity: 0.0;
padding: 5px;
background-color: #f8f6f6;
color: #cccbcb;
z-index:400;
}
And here is the Javascript snippet:
<script language="javascript">
$(document).ready(function() {
$('a#clickbutton').click(function() {
$('.t',this).toggle();
});
$("#popup").css({"opacity": "0.0", "z-index": "-10"});
$("#clickbutton").toggle(
function () {
$("#popup").animate({"opacity": "1.0", "z-index": "400"}, "fast");
},
function () {
$("#popup").animate({"opacity": "0.0", "z-index": "-30"}, "fast");
});
});
</script>