<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Popup</title>
</head>
<script type="text/javascript" src="jquery-latest.js"></script>
<style>
.container{
position:absolute;
width:100%;
left:0;
height:100%;
top:0;
background:#000;
opacity:0.5;
filter:alpha(opacity=50);
z-index:2;
display:none;}
.popup{
position:absolute;
width:50%;
height:50%;
background:#000;
left:50%;
top:20%;
color:#FFF;
margin-left:-400px;
z-index:3;
display:none;}
</style>
<body>
<button class="show">Show Popup</button>
<div class="container"></div>
<div class="popup" align="center"><h2>This is your Popup</h2><br />
<button class="close">Close</button></div>
<script>
$(".show").click(function(){
$(".container").fadeIn(1600);
$(".popup").fadeIn(1600);
});
$(".container").click(function(){
$(".container").fadeOut("slow");
$(".popup").fadeOut("slow");
});
$(".close").click(function(){
$(".container").fadeOut("slow");
$(".popup").fadeOut("slow");
});
</script>
</body>
</html>
Tidak ada komentar:
Posting Komentar
Leave a message