[المتصفحات المشاركة في الاختبار: IE6/IE7/IE8/FF3.5/OP9.6/SF4/Chrome2]
[نظام التشغيل: ويندوز]
يهدف هذا البرنامج التعليمي إلى فصل أسلوب وسلوك LightBox وتقليل عمل JS في جوانب مختلفة (إخفاء ملء الشاشة، تحديد الإخفاء في IE6، التوسيط ثنائي الاتجاه، المحتوى المتكيف مع الارتفاع، وما إلى ذلك).
أولا الكود :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<الرأس>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Chomo" />
<link rel="start" href=" http://www.14px.com " title="الصفحة الرئيسية" />
<title>حماية كاملة للشاشة، وصندوق إضاءة مركزي تلقائيًا</title>
<نمط النوع = "نص/CSS">
* { الهامش:0؛
html,body { الارتفاع:100%; الخط:12px/1.5 simsun;}
.myPage { ارتفاع الخط:3؛ العرض: 100%؛}
.لايت بوكس،
.بوبوبكوفير،
.popupIframe،
.popupComponent { الموضع: اليسار المطلق: 0؛ العرض: 100%؛}
.popupComponent { z-index:2 العرض: لا شيء؛}
.popupIframe { العرض: لا شيء _display:block _filter:alpha(opacity=0);}
.popupCover { الخلفية:#000 العتامة:0.7؛}
.lightBox { محاذاة النص: مركز تجاوز: تلقائي؛}
.lightBoxContent {display:inline-block; *display:inline; width:300px;
.lightBoxMaxHeight { العرض: كتلة مضمنة؛ محاذاة عمودية: منتصف؛ * الارتفاع: 99.5%؛
.lightBoxWrapper {display:inline-block;
.lightBoxClose { اللون:#f00;}
.lightBoxSubmit { هامش أعلى: 10px الحشو أعلى: 5px الحدود: 1px الصلبة #ccc؛}
.lightBoxSubmit input { حجم الخط: 12px الحشو: 0 10px؛}
</نمط>
</الرأس>
<الجسم>
<div class="popupComponent" id="lightBox">
<iframe class="popupIframe"></iframe>
<div class="popupCover"></div>
<div class="lightBox">
<span class="lightBoxMaxHeight"></span>
<div class="lightBoxContent">
<div class="lightBoxWrapper">
يتم توسيط النص عندما تكون المطالبة أصغر من سطر واحد<br />
</div>
<div class="lightBoxSubmit">
<input type = "button" value = "OK" onclick = "hideLayer ('lightBox')" />
<input type = "button" value = "إلغاء" onclick = "hideLayer ('lightBox')" />
</div>
</div>
</div>
</div>
<div class="popupComponent" id="lightBox2">
<iframe class="popupIframe"></iframe>
<div class="popupCover"></div>
<div class="lightBox">
<div class="lightBoxContent">
<div class="lightBoxWrapper">
عندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدة<br />
عندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدة<br />
عندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدة<br />
عندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدة<br />
عندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدة<br />
عندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدة<br />
عندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدة<br />
عندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدة<br />
عندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدة<br />
عندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدة<br />
عندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدة<br />
عندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدة<br />
عندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدة<br />
عندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدة<br />
عندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدة<br />
عندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدة<br />
عندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدة<br />
عندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدة<br />
عندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدة<br />
عندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدة<br />
عندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدة<br />
عندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدة<br />
عندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدةعندما يتجاوز المحتوى ارتفاع شاشة واحدة<br />
</div>
<div class="lightBoxSubmit">
<input type = "button" value = "OK" onclick = "hideLayer ('lightBox2')" />
<input type = "button" value = "إلغاء" onclick = "hideLayer ('lightBox2')" />
</div>
</div>
<span class="lightBoxMaxHeight"></span>
</div>
</div>
<div class="myPage">
التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />
<div style="text-align:center;"><input type="button" value="الزر الموجود على الشاشة الأولى" onclick="showLayer('lightBox')" /></div>
التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />
<select><option>تحديد يستخدم لاختبار ما إذا كان من الممكن تغطيته في IE6</option></select><br />
التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />
التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />
التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />
<select><option>اختيار آخر لاختبار ما إذا كان يمكن تغطيته في IE6</option></select><br />
التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />
<div style="text-align:center;"><input type="button" value="الزر الموجود في الشاشة الثانية" onclick="showLayer('lightBox')" /><input type="button" القيمة ="عندما يتجاوز المحتوى ارتفاع شاشة واحدة" onclick="showLayer('lightBox2')" /></div>
التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />
التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />
التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />
</div>
<النص البرمجي>
وظيفة showLayer (معرف) {
document.getElementById(id).style.display = "block";
}
وظيفة إخفاء الطبقة (المعرف) {
document.getElementById(id).style.display = "none";
}
</script>
</الجسم>
</html>
يتميز هذا الصندوق المبسط بالخصائص التالية، ويمكنك اختباره عن طريق تعديل الكود ^-^:
إذا كنت مهتمًا، فالنصائح التالية التي يتكون منها هذا الصندوق المبسط متاحة لك كمرجع:
1. طريقة إخفاء الشاشة الكاملة:
أ. إخفاء شريط التمرير لـ html/body.
ب. استخدم div كقناع، ثم استخدم div آخر لإنشاء صفحة تحتوي على أشرطة تمرير، واحدة في الأعلى وواحدة في الأسفل.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<الرأس>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Chomo" />
<link rel="start" href=" http://www.14px.com " title="الصفحة الرئيسية" />
<title>طريقة إخفاء ملء الشاشة</title>
<نمط النوع = "نص/CSS">
* {
Margin:0;
}
أتش تي أم أل، الجسم {
height:100%; /*--- مع هذا الارتفاع، ضمن IE6، يكون من الفعال ضبط الارتفاع:100% للكائن الفرعي للجسم---*/
overflow:hidden /*--- اقتل شريط التمرير الذي تم إنشاؤه بواسطة html أو body---*/;
}
.صفحة {
ارتفاع الخط: 3؛
overflow:auto /*--- يعتمد شريط التمرير عليه ---*/
width:600px; height:400px; الخلفية:#f60; /*--- لنجعلها بهذا الحجم الآن حتى يتمكن الجميع من الرؤية بوضوح---*/
Position:relative left:50px; top:50px; /*--- حركه قليلاً حتى يتمكن الجميع من رؤيته بوضوح وإزالته وتحقيق التأثير الأساسي للقناع---*/
}
.غطاء {
الموقف:مطلق؛
العرض: 600 بكسل الارتفاع: 400 بكسل الخلفية: #000;
العتامة:0.7؛ *filter:alpha(opacity=70);
مؤشر z:2؛
}
</نمط>
</الرأس>
<الجسم>
<div class="cover"></div>
<div class="page">
التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />
التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />
التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />
التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />
التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />
التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />
التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />
التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />
التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />التظاهر بالثراء في المحتوى<br />
</div>
</الجسم>
</html>