طرق إنشاء نوافذ منبثقة

مقدمة

في هذا الدرس ، لن أكشف عن سر مصممي التخطيط المخضرمين ومعلمي css ، ولكن هذه المقالة ستكون مفيدة للمبتدئين. هذا هو المكان الذي يمكنك من خلاله معرفة كيفية إنشاء النوافذ المنبثقة فوق موقع بأكمله.

في أغلب الأحيان ، تظهر هذه النوافذ بعد تنفيذ إجراءات معينة على الموقع ، على سبيل المثال ، ينقر المستخدم على رابط "طلب إعادة الاتصال" وينبثق نموذج الطلب أمامه.

من الملائم للغاية استخدام نوافذ PopUp مع ajax ، ولكن هذا هو موضوع درس آخر.

بدأ ظهور المزيد والمزيد من موارد الويب على الشبكة التي تستخدم النوافذ المنبثقة المنبثقة. كمثال ، يمكننا إعطاء الجميع شبكات اجتماعية مألوفة. يتم حذف جميع البيانات الزائدة من لقطات الشاشة.

فكونتاكتي

الفيسبوك

تويتر

أعتقد أن هناك أسبابًا كافية لبدء دراسة السؤال: كيفية جعل PopUp منبثقة على موقعك.

بيان المشكلة (TOR)

تحتاج إلى إنشاء نافذة منبثقة مع شاشة باهتة على الموقع بأكمله.

الحل

الطريقة الأولى

أتش تي أم أل

<div class="b-container"> Sample Text </div> <div class="b-popup"> <div class="b-popup-content"> Text in Popup </div> </div> 

المغلق

 *{ font-family: Areal; } .b-container{ width:200px; height:150px; background-color: #ccc; margin:0px auto; padding:10px; font-size:30px; color: #fff; } .b-popup{ width:100%; height: 2000px; background-color: rgba(0,0,0,0.5); overflow:hidden; position:fixed; top:0px; } .b-popup .b-popup-content{ margin:40px auto 0px auto; width:100px; height: 40px; padding:10px; background-color: #c5c5c5; border-radius:5px; box-shadow: 0px 0px 10px #000; } 

النتيجة:

غالبًا ما يقترحون استخدام:

 position:absolute; 

نعم ، النتيجة متشابهة ، ولكن نظرًا لأننا قمنا بتعيين ارتفاع كتلة "التعتيم" ، تظهر أشرطة التمرير. هذا هو السبب في أن هذه الطريقة ليست مناسبة.

الطريقة 2

لا تختلف هذه الطريقة بشكل أساسي عن الطريقة الأولى ، لكني أجدها أكثر ملاءمة.

Html (بدون تغيير)

 <div class="b-container"> Sample Text </div> <div class="b-popup"> <div class="b-popup-content"> Text in Popup </div> </div> 

Css

 *{ font-family: Areal; } .b-container{ width:200px; height:150px; background-color: #ccc; margin:0px auto; padding:10px; font-size:30px; color: #fff; } .b-popup{ width:100%; min-height:100%; background-color: rgba(0,0,0,0.5); overflow:hidden; position:fixed; top:0px; } .b-popup .b-popup-content{ margin:40px auto 0px auto; width:100px; height: 40px; padding:10px; background-color: #c5c5c5; border-radius:5px; box-shadow: 0px 0px 10px #000; } 

والنتيجة مماثلة.

بسبب العقار: أقل ارتفاع: 100٪ ؛ اكتسبت كتلة "التعتيم" الخاصة بنا عرضًا بنسبة 100٪ وحد أدنى لارتفاع 100٪ من الشاشة.

العيب الوحيد لهذه الطريقة هو أن Internet Explorer يدعم هذه الخاصية فقط من الإصدار 8.0.

مضيفا السحر إلى مسج

الآن أضف روابط لإخفاء / إظهار النافذة المنبثقة.

للقيام بذلك ، تحتاج إلى ربط مكتبة jQuery ونص صغير:

 <script src="http://code.jquery.com/jquery-2.0.2.min.js"></script> <script> $(document).ready(function(){ // PopUp    PopUpHide(); }); //  PopUp function PopUpShow(){ $("#popup1").show(); } //  PopUp function PopUpHide(){ $("#popup1").hide(); } </script> 

تحتاج أيضًا إلى تحديث Html:

 <div class="b-container"> Sample Text <a href="javascript:PopUpShow()">Show popup</a> </div> <div class="b-popup" id="popup1"> <div class="b-popup-content"> Text in Popup <a href="javascript:PopUpHide()">Hide popup</a> </div> </div> 

النتيجة

الآن عند تحميل الصفحة ، ستختفي النافذة المنبثقة PopUp.

إذا نقرنا على رابط "إظهار النافذة المنبثقة" ، فستظهر نافذة منبثقة. وإذا نقرت على رابط "إخفاء النافذة المنبثقة" ، فستختفي النافذة المنبثقة مرة أخرى.

يمكن رؤية النتيجة هنا: http://jsfiddle.net/p7NbX/15/