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

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

الأمر بسيط تُمثّل النافذة عنصر 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();
}

بالتوفيق

بتاريخ 38 دقائق مضت قال Lujain:

شكرا جزيلا