اول شي تضع الستايلات في ملف الـcss
إقتباس:
#overlay{
background-image: url(/images/overlay.png);
position: absolute;
top: 0px;
left: 0px;
z-index: 90;
width: 100%;
height: 100%;
}
* html #overlay{
background-color: #333;
background-color: transparent;
background-image: url(blank.gif);
filter: progid XImageTransform.Microsoft.AlphaImageLoader(
src="/images/overlay.png", sizingMethod="scale");
}
#box{
width:300px;
background:#2d2d2d;
padding:10px;
border:2px solid #eee;
}
#close{
position:absolute;
top:-5px;
right:-5px;
cursor ointer;
} |
بعدين تضع هذي الاكواد في ملف JS , | اذا ما تعرف تضعهم في ملف JS افتح النوت باد (المفكرة) واعمل بيست وبعدين حفظ باسم login.js مثلا او قم بنسخ اي ملف جافا سكربت من اي سكربت وافرغه من الاكواد وضع فيه الاكواد الجديدة
إقتباس:
| function showBox(){
$('overlay').show();
center('box');
return false;
}
function hideBox(){
$('box').hide();
$('overlay').hide();
return false;
}
function center(element){
try{
element = $(element);
}catch(e){
return;
}
var my_width = 0;
var my_height = 0;
if ( typeof( window.innerWidth ) == 'number' ){
my_width = window.innerWidth;
my_height = window.innerHeight;
}else if ( document.documentElement &&
( document.documentElement.clientWidth ||
document.documentElement.clientHeight ) ){
my_width = document.documentElement.clientWidth;
my_height = document.documentElement.clientHeight;
}
else if ( document.body &&
( document.body.clientWidth || document.body.clientHeight ) ){
my_width = document.body.clientWidth;
my_height = document.body.clientHeight;
}
element.style.position = 'absolute';
element.style.zIndex = 99;
var scrollY = 0;
if ( document.documentElement && document.documentElement.scrollTop ){
scrollY = document.documentElement.scrollTop;
}else if ( document.body && document.body.scrollTop ){
scrollY = document.body.scrollTop;
}else if ( window.pageYOffset ){
scrollY = window.pageYOffset;
}else if ( window.scrollY ){
scrollY = window.scrollY;
}
var elementDimensions = Element.getDimensions(element);
var setX = ( my_width - elementDimensions.width ) / 2;
var setY = ( my_height - elementDimensions.height ) / 2 + scrollY;
setX = ( setX < 0 ) ? 0 : setX;
setY = ( setY < 0 ) ? 0 : setY;
element.style.left = setX + "px";
element.style.top = setY + "px";
element.style.display = 'block';
} |
وبعدين في المكان اللي تبغيه ضع هذا الكود
إقتباس:
| <div id="overlay" onclick="hideBox()" style="display:none"></div>
<div id="box" style="display:none">
<img id="close" src="/images/close.gif" onclick="hideBox()" alt="Close"
title="Close this window" />
Here's a bunch of really sweet content!
</div> |
ايضا تحتاج الى تحميل هذا الملف واستدعائه في الهيدر
Prototype JavaScript framework: Download Prototype
المواضيع المشابهه 
كيف تفتح نافذة منبثقة ثم تغلق و تفتح الصفحة الأولى؟ 
