جی کوئری پاپ آپ ویندو
<head>
<script src=”jquery.min.js” type=”text/javascript”></script>
<style type=”text/css”>
body {
margin: 0;
padding: 0;
background-color: #e5e5e5;
text-align: center
}
.popup-screen {
position: fixed;
opacity: .8;
filter: alpha(opacity=80) !important;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: #000;
display: none;
z-index: 1000;
}
.show-popup, .login-btn {
font: normal 12px tahoma;
padding: 5px 12px 7px 12px;
margin: 0;
}
.btn-position {
margin-top: 200px;
}
.popup-win {
min-width: 450px;
height:300px;
background-color: #fff;
z-index: 1100;
position: fixed;
display: none;
direction:rtl;
overflow:auto;
padding:15px;
}
.input {
padding: 5px;
direction: ltr;
font-family: tahoma;
font-size: 12px;
margin: 0
}
.close-btn {
width: 20px;
height: 20px;
left: 7px;
top: 7px;
z-index: 100;
background: url(images/close-icon-20px.png) no-repeat center;
position: absolute;
cursor: pointer;
opacity: .7;
filter: alpha(opacity=70);
}
.close-btn:hover {
opacity: 1;
filter: alpha(opacity=100);
}
.login-items {
margin: 50px auto;
}
.login-items td {
padding: 3px;
font: normal 12px tahoma
}
</style>
<script type=”text/javascript”>
//—– jquery popup window ———
function setPosVer(){
var $popupWin =$(‘.popup-win’);
var popupWinWidth=$popupWin.width();
$popupWin.css(‘left’,$popupWin.parent().width()/2-$popupWin.width()/2);
};
function setPosHor(){
var $popupWin =$(‘.popup-win’);
var popupWinHeight=$popupWin.height();
$popupWin.css(‘top’,$(window).height()/2-$popupWin.height()/2);
};
$(function(){
setPosVer();
setPosHor();
$(‘.show-popup’).click(function(){
$(‘.popup-screen’).fadeIn(300,function(){
$(‘.popup-win’).slideDown();
});
});
$(‘.close-btn’).click(function(){
$(‘.popup-win’).slideUp(300,function(){
$(‘.popup-screen’).fadeOut();
});
});
});
$(window).resize(function(){
setPosVer();
setPosHor();
});
</script>
</head>
<body>
<div class=”popup-screen”></div>
<div class=”popup-win”>
محل قرار گرفتن محتوای پنجره
<div class=”close-btn”></div>
</div>
<button class=”show-popup btn-position”>جی کوئری پاپ آپ ویندو</button>
</body>
