Currently, I am working on implementing a lightbox effect to showcase images to the user using a GridView. Upon clicking an image, a new layer should appear above the current page displaying a larger version of the image along with some description. Although I have successfully displayed the layer with the image and its content, everything appears transparent. I have tried adjusting the opacity to 1 and moving other elements to a higher z-index, but unfortunately, nothing seems to work.
Below is my CSS code:
#imageshown{
position:absolute;
z-index:1;
width:1000px;
height:600px;
background:#000;
opacity:0.8;
}
#imageshown > img{
opacity:1;
z-index:2;
position:relative;
top:15px;
width:450px;
height:450px;
margin:0 auto;
}
#image_content{
opacity:1;
z-index:2;
position:relative;
top:15px;
width:450px;
height:100px;
margin:0 auto;
background:#FFF;
}
#exit{
position:absolute;
border-radius:50px;
background:#006;
opacity:1;
top:-5px;
left:-5px;
z-index:2;
color:white;
text-align:center;
width:30px;
height:30px;
}
In addition, here is my jQuery code:
$("#imggroup img").click(function(e) {
$(document).find(".NewElement").remove();
var ImageElement ="<img src=\"" + $(this).attr("src") + "\" alt=\"image shown\" />";
var DivContents = "<div id=\"image_content\"> blah blah blah </div>";
var Exit = "<div id=\"exit\" > X </div>";
var ElementWrap = "<div id=\"imageshown\" class= \"NewElement\"> "+ ImageElement + DivContents+ Exit+"</div>";
alert(ElementWrap);
$("#container").prepend(ElementWrap);
});
Although I have implemented a function for exiting the lightbox as well, I am encountering issues with being able to click on it.