Looking for a unique pop-up window to display on my homepage with the option to close it by clicking an X button. Here is the custom CSS:
.sign-up-modal {
width: 590px;
height: 464px;
position:fixed;
z-index:700;
top:180px;
left:50%;
background-image: url('images/youtubeconsole.png');
margin-left:-295px;
display:block;
}
.modalbackground {
width:100%;
height:100%;
background-image: url('images/modalbackground.png');
background-repeat: repeat;
position:fixed;
z-index:99999;
}
.youtubexbutton {
bottom: 12px;
right:13px;
position:absolute;
width:26px;
height:26px;
background-image:url('images/youtubex.png');
}
.youtubexbutton:hover {
background-image:url('images/youtubex-hover.png');
cursor:pointer;
}
Implemented in WordPress, inside header.php:
<script>
jQuery(document).ready(function(){
jQuery('.youtubexbutton').click(function(){
jQuery('.sign-up-modal').hide();
});
jQuery('.youtubexbutton').click(function(){
jQuery('.modalbackground').hide();
});
}
</script>
On the homepage:
<div class="sign-up-modal">
<div class="youtubexbutton"></div>
</div>
While the modal window shows up, clicking on youtubexbutton doesn't work as expected. The goal was for both .modalbackground and .sign-up-modal to disappear upon clicking.