اذهب إلى المحتوى
  • 0

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

_Mehdi

السؤال

السلام عليكم

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 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
رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...