Here is the method to open popup window with fading effect. You can also put image on the place of text.
Code:
<style>
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#dialog {
border: 5px solid gray;
width:570px;
height:auto;
padding:10px;
background-color:#ffffff;
z-index: 9999;
}
.window {
position:fixed;
left:0;
top:0;
width:570px;
height:auto;
display:none;
z-index:999999;
padding:20px;
}
</style>
<!-- This window will result in a popup -->
<div id="dialog" class="window" style="display:none;">
Hi User.How are you?
<a href="#" class="close">Close</a>
</div>
<!-- Click on it to show popup -->
<a href="#dialog" name="modal">Show Popup</a>
<!-- //to cover the screen -->
<div id="mask"></div>
<script>
jQuery(document).ready(function() {
//select all the a tag with name equal to modal
jQuery('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = jQuery(this).attr('href');
//Get the screen height and width
var maskHeight = jQuery(document).height();
var maskWidth = jQuery(window).width();
//Set heigth and width to mask to fill up the whole screen
jQuery('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
jQuery('#mask').fadeIn(500);
jQuery('#mask').fadeTo("slow",0.6);
//Get the window height and width
var winH = jQuery(window).height();
var winW = jQuery(window).width();
//Set the popup window to center
jQuery(id).css('top', winH/2-jQuery(id).height()/2);
jQuery(id).css('left', winW/2-jQuery(id).width()/2);
//transition effect
jQuery(id).fadeIn(2000);
});
//if close button is clicked
jQuery('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
jQuery('#mask').hide();
jQuery('.window').hide();
});
//if mask is clicked
jQuery('#mask').click(function () {
jQuery(this).hide();
jQuery('.window').hide();
});
jQuery(window).resize(function () {
var box = jQuery('.window');
//Get the screen height and width
var maskHeight = jQuery(document).height();
var maskWidth = jQuery(window).width();
//Set height and width to mask to fill up the whole screen
jQuery('#mask').css({'width':maskWidth,'height':maskHeight});
//Get the window height and width
var winH = jQuery(window).height();
var winW = jQuery(window).width();
//Set the popup window to center
box.css('top', winH/2 - box.height()/2);
box.css('left', winW/2 - box.width()/2);
});
});
</script>
