• 0

اضافة نافذة منبثقة في الJquery

السلام عليكم

كيف يمكن اضافة نافذة تنبثق من زر عند الضغط عليها بخاصية الslideToggle ولكن لايتحرك المحتوى الذي تحتها بل تظهر فوقة كما في النافذه الموجودة في اكاديمية حسوب (دخول/تسجيل )علما  انا اعرف كيف اصمم هذه الخاصية للعناصرلكن عندما اضعها في الموقع  محتوى الموقع يتحرك ينزل الى الاسفل اريد ان اجعلها تظهر فوقه

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 2

ما فهمته من سؤالك أنك تريد عمل نافذة تتوضّع بشكل حر على الشاشة بحيث تظهر فوق محتوى الشاشة عند الضغط على زر.

الأمر بسيط تُمثّل النافذة عنصر div، ولعملها أنشئ عنصر div وعيّن الخاصيّة position بالقيمة absolute. وذلك حتى يأخذ مكانه بشكل مستقل دون أن يؤثر أو يتأثر بباقي عناصر الصفحة. وعيّن الخاصية display بالقيمة none حتى يتم إخفاء الـ div ولا يظهر إلا عند الضغط على الزر. كذلك يجب تعيين الخاصيّة z-index: 1000 ليظهر العنصر div فوق محتوى الصفحة  كما في المثال التالي:

  <div id="divBox" style="top: 0; left: 0; position: absolute; width: 50%; display: none; z-index: 1000; overflow-y: scroll; overflow-x: hidden; color: white;">
              

الآن أنشئ الزر الذي سيُظهرالنافذة عند الضغط عليه واستدعي تابع الـ JQuery -الذي سيُنفّذ عند الضغط على الزر- في التابع  onclick:

<input type="button" value="Show Box" onclick="showDivBox()">

في هذا التابع اكتب:

 function showDivBox() {
                    $('#divBox').slideDown();
                }

الآن سيظهر لك الـ div عند الضغط على الزر.

يمكنك إضافة أيقونة إغلاق لتتمكّن من إغلاق النافذة ولعمل ذلك اكتب الشيفرة التالية:

  <div id="divBox" style="top: 0; left: 0; position: absolute; width: 50%; display: none; z-index: 1000; overflow-y: scroll; overflow-x: hidden; color: white;">
    
     <a style="cursor:pointer" onclick="closeDiv()" title="إغلاق"><i class="fa fa-close fa-2x"></i></a>
    
</div>
              

في السكربت:

   function closeDiv() {

     $('#divBox').slideUp();
}

56c0b2f3286f8_Divbox.thumb.png.7421c7f3f

 

بالتوفيق

تمّ تعديل بواسطة Lujain
1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0
بتاريخ 38 دقائق مضت قال Lujain:

شكرا جزيلا

 

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن