كيف أضع نافذة منبثقة Popup في الرئيسية؟

عبدالله ابو حميد · 23 مايو 2020

السلام عليكم،

كيف أقوم بوضع نافذة منبثقة تظهر في الصفحة الرئيسية بشكل تلقائي بمجرد دخول الزائر للصفحة؟

دون أن يقوم بالنقر على أي شيء.

علماً بأن النافذة التي أريد عبارة عن صورة + زر (X) للإغلاق فقط.

وجدت هذه الأداة https://jquerymodal.com/ لكنها للأسف يجب أن أقوم بالنقر على زر معين، وأنا لا أريد الزائر أن ينقر على أي شيء، فقط بمجرد الدخول تظهر النافذة.

أريد أبسط كود ممكن، لأنني مبتدئ.

تم التعديل في 23 مايو 2020 بواسطة عبدالله التميمي5

Nezar Madi · 23 مايو 2020

مرحبا عبدالله..

بإستخدام نفس المكتبة التي قمت بذكرها بإمكانك عمل التالي :

<html>
  <head>
    <!-- jQuery ملف مكتبة :) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
  </head>
  <body>
    
    <!-- المحتوى الذي سيظهر في الناقذة المنبثقة -->
    <div id="ex1" class="modal">
      <!-- الصورة -->
      <img alt="Dawn light" src="https://drscdn.500px.org/photo/1016156589/q%3D80_m%3D1500_k%3D1/v2?sig=5ed6ecfcd66064063921f0c5af64e7872c44e14e5ee3d8e3c4640bd70c786119" style="width: 100%; height: auto;">
    </div>

    <!-- الرابط الذي سيتسبب في فتح النافذة مخفي -->
    <a style="display:none;" id="modal_trigger" href="#ex1" rel="modal:open"></a>
    
    <!-- jQuery Modal -->
    <!-- ملفات المكتبة -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
    
    <!-- هذا السكربت سيقوم بفتح نافذة منبثقة بشكل تلقائي بعد 3 ثواني -->
    $(document).ready(function(){
      setTimeout(function(){
        $('#modal_trigger').click();
      }, 3000);
    });
    
  </body>

للعلم بالإمكان عملها بأكثر من طريقة و لكن هذه أول طريقة خطرت في بالي بإستخدام المكتبة المرفقة , بالإمكان تعديل الوقت الزمني لفتح الشاشة المنبثقة بتغيير القيمة 3000 في السكربت علما بأن 1000 يساوي ثانية واحدة في حالة تريدها أن تفتح مباشرة قم بتحديد الوقت 0.

هذا رابط لمشاهدة نسخة لايف.

النتيجة النهائية بعد 3 ثواني من فتحك للصفحة :

5ec968e7306a9_Screenshotfrom2020-05-2320-16-47.png.5e1bbb20fae916dd6144d45c563c7d47.png

Mohammed Ahmed13 · 23 مايو 2020

مرحباً بك،

يمكنك تنفيذ المطلوب عبر تسجيل مستمع يقوم بالتنفيذ بعد تحميل الصفحة وإظهار النافذة المنبثقة من خلاله، أدناه كود يوضح ذلك:

document.addEventListener('DOMContentLoaded', () => {
    // هنا الكود الخاص بإظهار النافذة
});

// باستخدام jQuery
$(document).ready(() => {
    // هنا الكود الخاص بإظهار النافذة
});

سمير عبود · 23 مايو 2020

مرحبا
يمكنك استعمال bootstrap modal لعمل نافذة منبثقة عند تحميل الصفحة
تحتاج إلى تضمين bootstrap و jQuery
بهذا الشكل

<div id="myModal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <img class="img-fluid" src="https://via.placeholder.com/460x300

C/O https://placeholder.com/" alt="placehold image"/>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

و بعدها يمكنك استخدام javascript بهذا الشكل

 $(window).on('load',function(){
        $('#myModal').modal('show');
    });

يمكنك مشاهدة النتيجة من خلال هذا الرابط

كيف أضع نافذة منبثقة Popup في الرئيسية؟

السؤال

عبدالله ابو حميد

3 أجوبة على هذا السؤال

Recommended Posts

Nezar Madi

Mohammed Ahmed13

سمير عبود

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية