jQuery popup window
Custom popup window with on load and click events.
HTML
<div class="message">
<div class="message_pad">
<div id="message"></div>
<div class="message_leave">
</div>
</div>
</div>
CSS
.message {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 200px;
background: #b2b2b2;
opacity: 0.90;
z-index: +1;
}
#message {
width: 100%;
height: 485px;
font-size: 14px;
overflow-y: scroll;
}
.message_leave {
width: 100%;
height: 15px;
text-align: center;
background: #f5f5f5;
font-size: 10px;
}
.message_pad {
position: fixed;
left: 200px;
margin-top: 65px;
width: 500px;
height: 500px;
padding: 5px;
color: #000000;
background: #f5f5f5;
border: 2px solid;
border-color: #9a9a9a;
border-radius: 10px;
box-shadow: 0px 4px 15px #000000;
}
JavaScript
// Save data to sessionStorage
sessionStorage.setItem('firstVisit', '1');
/* Fix size on document ready.
*/
$(function()
{
if (!sessionStorage.getItem('firstVisit') === "1")
{
$(".message").show();
}
//Close element.
$(".message").click(function()
{
$(this).hide();
});
$(".message").css({
'height': $(document).height()+'px'
});
$(".message_pad").css({
'left': ($(document).width()/2 - 500/2)+'px'
});
});
/*
* Fix size on resize.
*/
$(window).resize(function(){
$(".message").css({
'height': $(document).height()+'px'
});
$(".message_pad").css({
'left': ($(document).width()/2 - 500/2)+'px'
});
});