ستساعدك المقالة التالية: كيفية إنشاء النوافذ المنبثقة المشروطة؟ / التمهيد & أمبير ؛ مسج وأمبير. CSS

غالبًا ما تُستخدم النوافذ المنبثقة المشروطة على الويب لبدء الاشتراك في الرسائل الإخبارية ، وإظهار الإخطارات / التنبيهات ، والتحكم في نماذج التسجيل وتسجيل الدخول.

يمكنك استخدام طرق مختلفة لإنشاء النوافذ المنبثقة المشروطة باستخدام لغة البرمجةو CSS، و جافا سكريبت. لذلك ، ستتعلم الآن على وجه التحديد خطوة بخطوة حول Bootstrap Modal Popupو jQuery Modal Popup، و CSS Modal Popup.

بعد ذلك ، سأعطيك أخيرًا طريقة بسيطة جدًا وقابلة للتنفيذ لإنشاء النوافذ المنبثقة وتنفيذها. ومع ذلك ، يجب أن تتعلم أولاً لماذا يتم استخدام النوافذ المنبثقة المشروطة و لماذا هم مهمون جدا.

تساعد نافذة منبثقة أو مربع حوار مشروط في إظهار آخر صفحة ويب تم تحديثها. الاستفادة من نافذة منبثقة مشروطة يعرض المعلومات المضافة ولا يتم تحميل الصفحة مرة أخرى. إنه مهم لتجربة مستخدم أفضل لأنه يوفر للمستخدمين القدرة على عرض المعلومات ذات الصلة في المربع المنبثق على صفحة ويب مماثلة.

تظل الوسائط صامتة حتى يتم تشغيلها ويتم استخدامها بشكل عام للتركيز على المستخدم في مكالمة واحدة ليكون نشطًا أو للتأكيد على المعلومات مثل نماذج الاشتراك والتنبيه.

هناك العديد من الأماكن التي تشارك فيها النوافذ المنبثقة المشروطة:

• استفسار / استمارات الاتصال

• إنشاء قوائم العملاء المحتملين / نماذج الاشتراك

• استمارات تسجيل الدخول / التسجيل

• نماذج البحث

• التنبيهات / الإخطارات

• نصائح مساعدة

• عرض الصور ومقاطع الفيديو بملء الشاشة

يمكنك إنشاء النوافذ المنبثقة الخاصة بك حول أهدافك. على سبيل المثال ، تسمح Alpma للمستخدمين بتسجيل الدخول في كل مكان على الموقع.

على الرغم من أن النوافذ المنبثقة لها سمعة سيئة بشأن استخدامها ، عند استخدامها بشكل صحيح ، يمكنك الاستفادة منها من أجل:

• زيادة سهولة استخدام موقع الويب الخاص بك.
• تقليل أوقات التحميل.
• توضيح جميع التصاميم.

بعد معرفة سبب أهمية النوافذ المنبثقة المشروطة ، يمكننا الآن تعلم كيفية إنشائها.

كما قرأت أعلاه ، تساعد النوافذ المنبثقة المشروطة المستخدمين حتى يتمكنوا من اتخاذ الإجراءات قبل الانتقال إلى مكان آخر. يمكن استخدامه أحيانًا لتنبيه المستخدمين أو أخذ المعلومات.

يساعدك البرنامج المساعد المشروط Bootstrap على إنشاء نوافذ منبثقة أو مربعات حوار مفيدة وعملية للغاية. يمكنك التحقق من المثال أدناه لفهم كيفية إنشاء نافذة منبثقة مشروطة خاصة بك مع رأس وتذييل ونص رسالة.

 "myModal"    class   = " modal fade ">   <  div   class  =  "modal-dialog"  >   << span class = "hljs-name"> div   class  =  "modal-content" >   << span class = "hljs-name"> div   class  =  "modal-header" >   << span class = "hljs-name"> الزر   اكتب  =  "button"   class  =  "close"   تجاهل البيانات  =  "modal"   aria-hidden  =  "true" >  ×   زر >   << span class = "hljs-name"> h4   class  =  "modal-title" > < / span> تأكيد   h4 >    div >   << span class = "hljs-name"> div   class  = " modal-body ">   << span class =" hljs-name "> p >  هل تريد حفظ التغييرات التي أجريتها على المستند قبل الإغلاق؟   p >   << span class = "hljs-name"> p   class  =  "text-warning" >   << span class = "hljs-name"> صغير >  إذا لم تقم بالحفظ ، فستفقد التغييرات.   small >    p >    div >   << span class = "hljs-name"> div   class  = " modal-footer ">   << span class =" hljs- name "> button   اكتب  = " button "  class  =  "btn btn-default"   تجاهل البيانات  = " modal ">  إغلاق  الزر  >   << span class = "hljs-name"> الزر   النوع  = " button "  class  = " btn btn-primary ">  حفظ التغييرات   الزر >    div >    div >    div >   << span class = "hljs-regexp"> / div> 
عندما يتم تحميل "نموذج كائن المستند" من خلال JavaScript ، سيتم فتح النافذة تلقائيًا.
تعد مربعات حوار jQuery modal طريقة ممتازة لعرض المعلومات بسرعة.  إذا قمت بالتحضير بشكل صحيح أثناء إنشاء مربعات حوار jQuery المشروطة ، يمكنك تنبيه المستخدمين أو إظهار الأخطاء في مواقع الويب الرائعة.  (بسبب الشكل المعاصر!)
  
  
لنلق نظرة على مثال jQuery!
  
 هذا عنوان 
 هذه فقرة. 
  
  
 هذه فقرة أخرى.   انقر فوقي < / زر>
بعد ذلك يمكنك رؤية ما يلي:
CSS هي لغة تصف كيفية عرض عناصر HTML على الشاشة.  لذلك ، ننظر أولاً إلى HTML ثم نفحص CSS.
    أساسي CSS-Only Modal 
  إغلاق 
 مرحبًا! 
 مشروط CSS فقط يعتمد على: target pseudo-class.  آمل أن تجده مفيدًا. 
  
  
ثم أضف CSS!
.modal-window {الموقف: ثابت؛  لون الخلفية: rgba (255 ، 255 ، 255 ، 0.25) ؛  أعلى: 0؛  اليمين: 0؛  أسفل: 0؛  اليسار: 0؛  مؤشر z: 999 ؛  العتامة: 0؛  أحداث المؤشر: لا شيء ؛  -webkit- الانتقال: كل 0.3s ؛  -موز-الانتقال: كل 0.3 ثانية ؛  الانتقال: كل 0.3 ثانية ؛  &: الهدف {العتامة: 1 ؛  أحداث المؤشر: تلقائي ؛  } &> div {width: 400px؛  الموقف: مطلق.  أعلى: 50٪؛  اليسار: 50٪؛  تحويل: ترجمة (-50٪ ، -50٪) ؛  الحشو: 2em ؛  الخلفية: #ffffff ؛  اللون: # 333333 ؛  } رأس {font-weight: bold؛  } h1 {font-size: 150٪؛  الهامش: 0 0 15 بكسل ؛  اللون: # 333333 ؛  }} .modal-close {color: #aaa؛  ارتفاع الخط: 50 بكسل ؛  حجم الخط: 80٪؛  الموقف: مطلق.  اليمين: 0؛  محاذاة النص: مركز ؛  أعلى: 0؛  العرض: 70 بكسل ؛  زخرفة النص: لا شيء ؛  &: تحوم {color: # 000؛  }} / * Demo Styles * / html، body {height: 100٪؛  } body {font: 600 18px / 1.5 -apple-system، BlinkMacSystemFont، "Segoe UI"، Roboto، Oxygen-Sans، Ubuntu، Cantarell، "Helvetica Neue"، sans-serif؛  لون الخلفية: # f69d75 ؛  color: # 555555} أ {color: inherit؛  } .container {display: grid؛  تبرير المحتوى: مركز ؛  محاذاة العناصر: مركز ؛  الارتفاع: 100 فولت  } .btn {background-color: #fff؛  الحشو: 1em 1.5em ؛  نصف قطر الحدود: 3 بكسل ؛  زخرفة النص: لا شيء ؛  i {المساحة المتروكة لليمين: 0.3em ؛  }}
تبدو هكذا:
  
  
مما لا شك فيه ، يمكنك إنشاء النوافذ المنبثقة المشروطة لأي غرض وفي أي مكان يتم تطبيقه على صفحة الويب الخاصة بك.  ومع ذلك ، هناك طريقة أكثر عملية وبسيطة لإنشاء نوافذ منبثقة مشروطة.
منشئ النوافذ المنبثقة الذكي ، يجعل Popupsmart كل شيء نيابة عنك.  بالنسبة للخطوة الأولى ، يجب عليك تحديد سبب حاجتك إلى نافذة منبثقة.  يمكن أن يكون لزيادة تحويل المبيعات أو زيادة قائمة البريد الإلكتروني أو زيادة المكالمات الهاتفية.  بعد ذلك ، باختيار أهدافك يمكنك الانتقال إلى الخطوات التالية:
هناك العديد من القوالب الجاهزة التي يمكنك الاختيار من بينها.  إذا كنت تريد توجيه جمهورك من خلال "إعلان منبثق" ، فيمكنك تحديد هذا:
  
  
أو إذا كنت ترغب في زيادة تحويل المبيعات باستخدام "نافذة منبثقة لترويج المنتج" ، فيمكن تصميم النافذة المنبثقة على النحو التالي:
يمكنك تخصيص رسالتك باختصار بناءً على سلوك الزائر لزيادة معدل التحويل والمشاركة والمبيعات.  أيضًا ، يتيح Popupsmart لمستخدميه تثبيت النوافذ المنبثقة في دقيقة واحدة والتي تتوافق مع جميع منصات مواقع الويب.
بعد تحديد هدف عملك والقوالب المنبثقة المتوافقة ، يمكنك تخصيصها ونشرها باستخدام نظام Popupsmart سهل الاستخدام دون أي مشكلة فنية.
  
  
من أجل إنشاء Wix popups و Squarespace popups ، يمكنك استخدام Popupsmart نظرًا لأنه يتكامل مع منشئي مواقع الويب هؤلاء.
آمل أن ترشدك هذه المقالة إلى كيفية إنشاء النوافذ المنبثقة بسهولة.  يمكنك محاولة جعلهم مع HTML أو CSS أو JavaScript.  ومع ذلك ، حتى لا تضيع الوقت ، ولإعداد النوافذ المنبثقة الأكثر لفتًا للنظر والأهم من ذلك للتحقق من تحويلاتك ، يجب عليك اختيار Popupsmart!
لفحص تصميمات Popupsmart بدقة ، يجب عليك التحقق من ذلك:
  
  
قوالب تصميم منبثقة
علاوة على ذلك ، هل تعرف كيفية إنشاء النوافذ المنبثقة في WordPress بدون مكون إضافي؟  اذهب إلى المقالة ذات الصلة لتتعلم الآن!
منشورات المدونة ذات الصلة
  
  
قم بزيادة تفاعلات منشورات المدونة الخاصة بك من خلال نافذة منبثقة بسيطة
تعزيز الخاص بك YouTube المشاهدات دون إزعاج زوار موقع الويب الخاص بك
كيفية إنشاء نماذج Tailwind CSS المنبثقة لموقعك على الويب
  
  
شكرا لك على وقتك!  🤗