حتما دیدید سایتهایی رو که بازدن یه لینک. تمام صفحه تاریک میشه (اسم دیگه براش پیدا نکردم) و یه پنجره کوچک باز میشه و منتظر لود شدن کامل صفحه میشه
چجوری میشه این تاریک کردن (در پشت قراردادن تمام صفحه درظاهر) رو انجام داد؟
این کاری رو که میگی به 2 روش میشهاز طریق روش AJAX انجام داد که به این صورته که یه کد جاوا اسکریپت مینویس که بیاد یه صفحه رو از طریق یه URL بگیره و کدای HTML رو توی یه مثلا DIV نشون بده ، این کدی رو که اینجا میزارام میتونه این کارو انجام بده . اما اینکه صفحه مات بشه و یه Dialog باز شه رو باید خودت انجام بدی . البته اگه وقت داشته باشم خودم انجام میدم واست اما قول نمیدم .
کد:
var agt = navigator.userAgent.toLowerCase();
var is_ie = (agt.indexOf('msie') != -1);
var is_ie5OrAbove = (agt.indexOf('msie 5') != -1) || (agt.indexOf('msie 6') != -1) || (agt.indexOf('msie 7') != -1);
function CreateXmlHttpReq(handler)
{
var xmlhttp = null;
if (is_ie)
{
var control = (is_ie5OrAbove) ? "Microsoft.XMLHTTP" : "Msxml2.XMLHTTP";
try
{
xmlhttp = new ActiveXObject(control);
xmlhttp.onreadystatechange = handler;
}
catch(e)
{
alert("You need to enable active scripting and activeX controls");
}
}
else
{
xmlhttp = new XMLHttpRequest();
xmlhttp.onload = handler;
xmlhttp.onerror = handler;
}
return xmlhttp;
}
function DummyHandler()
{
}
var uniqnum_counter = (new Date).getTime();
function XmlHttpGET(xmlhttp, url)
{
xmlhttp.open('GET', url, false);
xmlhttp.send(null);
return xmlhttp.responseText;
}
function SendRequest(url) {
var xmlhttp = CreateXmlHttpReq(DummyHandler);
return XmlHttpGET(xmlhttp, url);
}
خوب بازم اینجا 2 نکته داریم که یکی
[LTR]
filter:alpha(Opacity=?)
[/LTR]
هست که میزان ترانس پارنت این DIV که قراره صفحه مارو سیاه یا تیره کنه هستش و دوم ویزیبیلیتی که باعث میشه این لایه مشخص یا پنهان باشه .
یه نکته اینکه شما وقتی به حالت AJAX داری پیجت رو Retrive میکنی باید لایه اصلی صفحه رو غیر فعال( دلخواهی ) و این لایه ر, نمایان کنی یعنی این کد رو توی جاوا میزاری
[LTR]
کد:
function ShowHideTarnsparentDIV(div_id)
{
var nowVisibility=document.getElementById(div_id).style.visibility;
if(nowVisibility=="false")
{
document.getElementById(div_id).style.visibility="false";
}
else
{
document.getElementById(div_id).style.visibility="true";
}
}
[/LTR]
بعد که کل صفحه کامل لود شد دوباره این تابع رو اجرا میکنی .
شما باید یه دونه div با پس زمینه ی رنگی تعریف کنی که اندازه ی اون به اندازه ی کل صفحه باشه و توی استایل اون خاصیت filter اون رو alpha بزاری و بسته به مقداری که می خوای درصد % بدی
