صندوق إضاءة محمي بملء الشاشة ويتم توسيطه تلقائيًا

الكاتب：Eve Cole وقت التحديث：2009-07-27 17:14:47

[المتصفحات المشاركة في الاختبار: IE6/IE7/IE8/FF3.5/OP9.6/SF4/Chrome2]
[نظام التشغيل: ويندوز]

يهدف هذا البرنامج التعليمي إلى فصل أسلوب وسلوك LightBox وتقليل عمل JS في جوانب مختلفة (إخفاء ملء الشاشة، تحديد الإخفاء في IE6، التوسيط ثنائي الاتجاه، المحتوى المتكيف مع الارتفاع، وما إلى ذلك).

أولا الكود :

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">
<الرأس>

http://www.14px.com " 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؛}

<الجسم>

التظاهر بالثراء في المحتوى
التظاهر بالثراء في المحتوى
التظاهر بالثراء في المحتوى
التظاهر بالثراء في المحتوى

<النص البرمجي>
وظيفة showLayer (معرف) {
document.getElementById(id).style.display = "block";
}
وظيفة إخفاء الطبقة (المعرف) {
document.getElementById(id).style.display = "none";
}

يتميز هذا الصندوق المبسط بالخصائص التالية، ويمكنك اختباره عن طريق تعديل الكود ^-^:

يمكن أن يؤدي النقر في أي مكان على الصفحة إلى حماية الشاشة تمامًا (لا يمكن التحكم في أي عنصر بما في ذلك شريط التمرير بشكل مباشر في الوقت الحالي في IE6، يمكن حماية العنصر المحدد دون إخفائه (عيب طريقة حماية iframe: بعد التدريع، إذا اسحب شريط التمرير وسيظل التحديد يتحرك إلى الأعلى).
يتكيف ارتفاع LightBox مع محتواه ويظهر في المنتصف بشكل مثالي.
عندما يكون المحتوى سطرًا واحدًا، يتم عرضه في المنتصف؛ وعندما يكون المحتوى عدة أسطر، يتم عرضه على اليسار؛ وعندما يتجاوز ارتفاع المحتوى ارتفاع العرض المبسط، يتم عرض شريط التمرير وعرضها في الأعلى، حتى يتمكن القراء من قراءتها كاملة.

إذا كنت مهتمًا، فالنصائح التالية التي يتكون منها هذا الصندوق المبسط متاحة لك كمرجع:

1. طريقة إخفاء الشاشة الكاملة:

أ. إخفاء شريط التمرير لـ html/body.
ب. استخدم div كقناع، ثم استخدم div آخر لإنشاء صفحة تحتوي على أشرطة تمرير، واحدة في الأعلى وواحدة في الأسفل.

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">
<الرأس>

http://www.14px.com " 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؛
}

<الجسم>

التظاهر بالثراء في المحتوى
التظاهر بالثراء في المحتوى
التظاهر بالثراء في المحتوى
التظاهر بالثراء في المحتوى

التظاهر بالثراء في المحتوى
التظاهر بالثراء في المحتوى
التظاهر بالثراء في المحتوى
التظاهر بالثراء في المحتوى

التظاهر بالثراء في المحتوى
التظاهر بالثراء في المحتوى
التظاهر بالثراء في المحتوى
التظاهر بالثراء في المحتوى

التظاهر بالثراء في المحتوى
التظاهر بالثراء في المحتوى
التظاهر بالثراء في المحتوى
التظاهر بالثراء في المحتوى

التظاهر بالثراء في المحتوى
التظاهر بالثراء في المحتوى
التظاهر بالثراء في المحتوى
التظاهر بالثراء في المحتوى

التظاهر بالثراء في المحتوى
التظاهر بالثراء في المحتوى
التظاهر بالثراء في المحتوى
التظاهر بالثراء في المحتوى

التظاهر بالثراء في المحتوى
التظاهر بالثراء في المحتوى
التظاهر بالثراء في المحتوى
التظاهر بالثراء في المحتوى

التظاهر بالثراء في المحتوى
التظاهر بالثراء في المحتوى
التظاهر بالثراء في المحتوى
التظاهر بالثراء في المحتوى

التظاهر بالثراء في المحتوى
التظاهر بالثراء في المحتوى
التظاهر بالثراء في المحتوى
التظاهر بالثراء في المحتوى