Popup Image

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Pop-up</title>
<style>
body{overflow:hidden;}
#mydiv{display:none;position:absolute;}
.inner{position:relative; float:left; padding: 20px; width:100%;}
.inner .close{cursor: pointer; position: absolute; right: 58px;top: 18px;}
.small-image {left: 300px;position: relative;top:200px;}
.images li {
float: left;
list-style: none outside none;
margin-left: 12px;
}
</style>
<script>
function hello()
{
document.getElementById(‘mydiv’).style.display = “block”;
var win_width= window.innerWidth;
var win_height= window.innerHeight;
var pop_wid = document.getElementById(‘mydiv’).clientWidth;
var pop_hei = document.getElementById(‘mydiv’).clientHeight;
var left_pop = (win_width – pop_wid) / 2;
var top_pop = (win_height – pop_hei) / 2;
document.getElementById(‘mydiv’).style.left = left_pop+’px’;
document.getElementById(‘mydiv’).style.top = top_pop+’px’;

};

window.onresize = function()
{
var win_width= window.innerWidth;
var win_height= window.innerHeight;
var pop_wid = document.getElementById(‘mydiv’).clientWidth;
var pop_hei = document.getElementById(‘mydiv’).clientHeight;
var left_pop = (win_width – pop_wid) / 2;
var top_pop = (win_height – pop_hei) / 2;
document.getElementById(‘mydiv’).style.left = left_pop+’px’;
document.getElementById(‘mydiv’).style.top = top_pop+’px’;
};
function helloHide(){
document.getElementById(‘mydiv’).style.display = “none”;
}
</script>
</head>
<body>
<!–<button type=”submit” onclick=”hello();”>Show</button>–>
<div class=”images”>
<ul>
<li><img src=”http://picbook.in/wp-content/uploads/2014/07/happy_diwali__sms_images_.jpg&#8221; width=”200px” height=”200px” onclick=”hello();” class=”small-image”></li>
<li><img src=”http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg&#8221; width=”200px” height=”200px” onclick=”hello();” class=”small-image”></li>
<li><img src=”http://picbook.in/wp-content/uploads/2014/07/puppy_images_in_hd.jpg&#8221; width=”200px” height=”200px” onclick=”hello();” class=”small-image”></li>
</ul>
</div>
<div id=”mydiv”>
<div class=”inner”>
<img src=”http://picbook.in/wp-content/uploads/2014/07/happy_diwali__sms_images_.jpg&#8221; width=”800″ height=”500″>
<div class=”close” onclick=”helloHide();”><img src=”https://cdn1.iconfinder.com/data/icons/nuvola2/32×32/actions/button_cancel.png”></div&gt;
</div>
</div>
</body>
</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s