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

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

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

السؤال

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

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

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

 

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

 

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

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

تم التعديل في بواسطة عبدالله التميمي5
رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 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

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

  • 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');
    });

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

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

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...