• 0

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

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

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

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

 

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

 

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

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

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

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


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

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

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

<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

1 شخص أعجب بهذا

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


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

مرحباً بك،

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

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

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

 

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


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

مرحبا 
يمكنك استعمال 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');
    });

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

1 شخص أعجب بهذا

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


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

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

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

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


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

تسجيل الدخول

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


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