بسم الله الرحمن الرحيم
كما ترى فالصورة السابقة عبارة عن مجرد توضحي للاطارات او النوافذ المنبثقة( popup) باستخدام مكتبة jQuery وسوف اريك في هذه المقالة ان شاء الله كيف تصنع مثل هذه النوافذ في موقعك . وفي الحقيقة فانا وجدت هذه الطريقة جاهزة في احد المواقع ولكن للاسف لم يكون يوجد رابط تنزيل للملف الخاص بالشرح لذلك قررت بعد التوكل على الله انا اقوم بصناعة هذه النوافذ كما هو موضح في ذلك الموقع مع بعض التعديلات البسيطة ووضع السكريبت في ملف وملف التصميم (CSS) في ملف لكي يتمكن الجميع من إستخدام ( popup ) في مواقعهم
إذا كيف استخدم ال(popup)
سؤال جميل جدا والاجابه عليه تكون في الاسطرة التالية
أولا : قم بتحميل الملف المرفق وسوف تجد مجلد إسمه (Scripts) يحتوي هذه المجلد طبعا على مكتبة jQuery بالإضافة الى ملف أخر إسمه PopupScript.js وطبعا بداخله الكود اللازم لعمل ال popup
ثانيا : سوف تجد مجلد أخر إسمه Styles وبداخه ملف إسمة PopupStyle.css ويحتوي طبعا على التصميم (CSS) الخاص بال ( popup)
ثالثا : صورة بإسم close_pop.png وهي التي تظهر أقصى اليمين من أجل إغلاق ال( popup) طبعا بإمكانك ان تغيرها
ناتي الان الى إنشاء ال popup في صفحة ال Asp.net وهي كالتالي
أولا قم بوضع رابط والذي يقوم بدوره بفتح ال popup كالتالي
<a href="#270" rel="popup1" class="poplight">الكلام الذي تريده </a>
الان لاحظ معي ان الرابط يجب ان يحتوى على جميع ماسبق
rel : وهو يحمل إسم العنصر الذي سوف يتم فتحه على انه ( popup)
class : الغرض منه الوصل الى هذا العنصر من خلال jQuery
href : ويحتوي على علامة # متبوعة برقم وهذا الرقم هو عبارة عن عرض ال popup
لاحظ معي ان جميع ماسبق ثابت بإستثناء الرقم والذي قلنا انه عبارة عن عرض ال popup
الان الخطوة الاخيرة وهي وضع العناصر (ASP.NET Control) وعرضها بداخل ( popup)
قم بانشاء عنصر من نوع ( div) وهو عبارة عن حاوية ( container ) كالتالي
<div id="popup1" class="popup_block" > العناصر التي تريدها ضعها هنا </div>
لاحظ معي انه يجب ان يكون لديك
id : إسم الحاوية
class : ويحتوي على الستايل الذي يقوم بإخفاء ال popup عندما يتم عرض الصفحة
الان بعد ان قمت بعمل الخطوات السابقة جميعها قم باستعراض الصفحة وستجد أنه أصبح لديك ( popup) قمة في الروعة والبساطة
خلاصة
ماسبق شرحه لم يكن في الحقيقة سوى توضيح لكيفية إستخدام ال ( popup) جاهزة في موقعك بطريقة بسيطة وسهل فكل مايلزمك هو الملفات السابقة وبعض الاسطر في صفحاتك وسوف تجد انه تم إنشاء ال ( popup)
في الختام
أتمنى ان أكون قد وفقت في الطرح ولاتنسونا من الدعاء
وفق الله الجميع
