إنشاء سؤال “نعم/لا” في جافا سكريبت

عند بناء تطبيقات الويب، يعتبر تفاعل المستخدم هو المفتاح لإنشاء تجربة سلسة. أحد السيناريوهات الشائعة التي يواجهها المطورون هو الحاجة إلى طرح سؤال “نعم/لا” للمستخدمين. ومع ذلك، فإن الدالة القياسية confirm() في جافا سكريبت، على الرغم من وظيفتها، توفر فقط أزرار “موافق/إلغاء”. فماذا يمكن فعله لإنشاء مربع حوار مخصص يقدم للمستخدمين خيارات واضحة “نعم/لا”؟

قيود صناديق الحوار المدمجة

توفر جافا سكريبت بعض صناديق الحوار المدمجة: alert، confirm، و prompt. ومع ذلك، ليس لدى أيٍ منها خيار “نعم/لا” صريح. إليك نظرة سريعة على هذه الخيارات:

• alert(): تعرض رسالة للمستخدم مع زر “موافق”. مفيدة للإشعارات، ولكن لا تطرح أسئلة.
• confirm(): تطرح سؤالًا نعم/لا وتعيد قيمة بولين (true أو false). ومع ذلك، تستخدم أزرار “موافق/إلغاء” بدلاً من “نعم/لا”.
• prompt(): تسمح بإدخال المستخدم ولكنها ليست مناسبة للتفاعلات نعم/لا ولديها فقط أزرار “موافق/إلغاء”.

قد لا تلبي هذه الدوال المدمجة احتياجاتك المحددة، مما يقودنا لاستكشاف الحلول المخصصة.

حلول النوافذ المنبثقة المخصصة

لإنشاء سؤال “نعم/لا” في مربع حوار، يختار العديد من المطورين المكتبات التابعة لجهات خارجية التي تسمح لصناديق الحوار بأن تكون أكثر تخصيصًا. واحدة من هذه الحلول هي ModalBox. إليك نظرة سريعة على كيفية تنفيذها:

استخدام ModalBox

1. التثبيت: أولاً، قم بإضافة ModalBox إلى مشروعك. يمكنك العثور على المكتبة على GitHub هنا.

2. بنية HTML: قم بإعداد بنية HTML لمربع الحوار الخاص بك. إليك مثال على بنية بسيطة لمربع الحوار الخاص بك:

   <div id="myModal" class="modal">
       <div class="modal-content">
           <span class="close">&times;</span>
           <p>هل أنت متأكد أنك تريد المتابعة؟</p>
           <button id="yesButton">نعم</button>
           <button id="noButton">لا</button>
       </div>
   </div>
   

3. تنسيق مربع الحوار: لا تنسَ إضافة أنماط لمربع الحوار الخاص بك لتحسين تجربة المستخدم. إليك مثال بسيط على CSS:

   .modal {
       display: none; 
       position: fixed; 
       z-index: 1; 
       left: 0;
       top: 0;
       width: 100%; 
       height: 100%;
       overflow: auto; 
       background-color: rgb(0,0,0);
       background-color: rgba(0,0,0,0.4);
   }
   
   .modal-content {
       background-color: #fefefe;
       margin: 15% auto; 
       padding: 20px;
       border: 1px solid #888;
       width: 80%;
   }
   

4. وظائف جافا سكريبت: أخيرًا، أضف وظائف جافا سكريبت التي ستفتح نافذة الحوار عند الحاجة وتعالج نقرات الأزرار:

   document.getElementById('myModal').style.display = "block"; // افتح النافذة المنبثقة
   
   document.getElementById("yesButton").onclick = function() {
       console.log("نقر المستخدم على نعم");
       // أضف الإجراء الخاص بك لـ "نعم" هنا
       document.getElementById('myModal').style.display = "none"; 
   }
   
   document.getElementById("noButton").onclick = function() {
       console.log("نقر المستخدم على لا");
       // أضف الإجراء الخاص بك لـ "لا" هنا
       document.getElementById('myModal').style.display = "none"; 
   }
   
   document.getElementsByClassName("close")[0].onclick = function() {
       document.getElementById('myModal').style.display = "none"; 
   }
   

الخاتمة

إنشاء سؤال “نعم/لا” مخصص في جافا سكريبت ممكن من خلال استخدام مكتبات صناديق الحوار بدلاً من الاعتماد فقط على الدوال المدمجة. سواء اخترت ModalBox أو بديل آخر، توفر هذه الحلول المخصصة تجربة مستخدم أفضل بينما تعزز التفاعل في تطبيقات الويب الخاصة بك.

استكشف المكتبات المتاحة واختر المكتبة التي تناسب أسلوب ووظائف مشروعك، وسرعان ما ستكون قادرًا على تفاعل المستخدمين بأسئلة “نعم/لا” واضحة وسهلة الوصول.