Code:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$(
document).keyup(function(e){
var bbp = $(
'#bbp')
if(bbp.is(
":visible")
&&e.keyCode
==27){
$(
"#bbp, #pop").fadeOut(
250);}
});
$(
"#button").click(function(){
$(
"#bbp, #pop").fadeIn(
250);
});
$(
'#bbp, #close').click(function(){
$(
"#bbp, #pop").fadeOut(
250);
});
});
</script>
<style>
#bbp {
background: #000000;
border: 1px #ffffff solid;
display: none;
height: 100%;
left: 0;
opacity: .7;
position: fixed;
_position: absolute; /*For Internet Explorer*/
top: 0;
width: 100%;
z-index: 1 !important;
}
#pop {
background: #ffffff;
border: 1px #32baed solid;
display: none;
left: 50%;
position: fixed;
_position: absolute; /*For Internet Explorer*/
top: 50%;
width: 400px;
z-index: 2 !important;
}
#button, #close {
cursor: pointer;
}
</style>
</head>
<body>
<input id="button" type="button" value="PopUp">
<div id=
"pop">
<table width=
"100%"><tr><td width=
"50%">PopUp</td><td align=
"right" width=
"50%"><img id=
"close" src=
"http://img.wcetdns.com/btns/blue_x.png"></td></tr></table>
</div>
<div id=
"bbp"></div>
</body>
</html>
Views: 431 Likes: 0 Dislikes: 0
 Tutorial%20by%20W.C.E.T.%20Designs "Pin It")
