Struggling with getting my JQuery Pop-Up Box to work properly. Any guidance for a newbie like me on how to fix it would be greatly appreciated. Here's the code I've been working on:
<!-- POP UP HTML -->
<div class="infocontainer">
<div class="infoouter">
<!-- BACKGROUND COLOUR -->
</div><!-- /infoouter -->
<div class="infobox">
<a href="#" class="infoclose"><img class="infoclose" alt="close" src="http://www.doopsdesigns.co.uk/images/socialicons/close.png" width="26" height="26">
</a>
<img class="infoimg" src="#">
<div class="infotext">
<h1 align="center">HELP JASONS POP UP BOX</h1>
</div><!-- /infotext -->
</div><!-- /info box -->
</div><!-- /infocontainer -->
<!-- /POP UP -->
/* POPUPSTART CSS */
.infocontainer{
display:block;
}
.infoouter{
background-color:#222222;
height:100%;
width:100%;
position:absolute;
z-index:9998;
float:none;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
.infobox{
background-color:#ffffff;
border-style: solid;
border-width: 5px;
border-color: #f3af4e;
height:60%;
width:80%;
position:absolute;
left:10%;
top:20%;
padding:15px;
z-index:9999;
float:none;
}
.infoimg{
float:left;
}
.infoclose{
float:right;
}
.infotext{
left:10%;
right:10%;
top:20%;
bottom:20%;
padding:10%;
height:60%;
width:80%;
text-align:center;
position:absolute;
}
/* /POPUPSTART */
// JavaScript Document
$(document).ready(
function() {
$(".infoclose").click(function() {
$(".infocontainer").slideRight("slow");
});
});
Would love for the pop-up to show up when the page loads and disappear when the close button is clicked.
Hopefully, I've given all the necessary details. Thanks in advance for any help!
Cheers, Jason.