القائمة الرئيسية

الصفحات

JavaScript - Dialog Boxes



 JavaScript supports three important types of dialog boxes. These dialog boxes can be used to raise and alert, or to get confirmation on any input or to have a kind of input from the users. Here we will discuss each dialog box one by one.

Alert Dialog Box

An alert dialog box is mostly used to give a warning message to the users. For example, if one input field requires to enter some text but the user does not provide any input, then as a part of validation, you can use an alert box to give a warning message.

Nonetheless, an alert box can still be used for friendlier messages. Alert box gives only one button "OK" to select and proceed.

Example

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


<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function Warn() {
               alert ("This is a warning message!");
               document.write ("This is a warning message!");
            }
         //-->
      </script>     
   </head>
   
   <body>
      <p>Click the following button to see the result: </p>      
      <form>
         <input type = "button" value = "Click Me" onclick = "Warn();" />
      </form>     
   </body>
</html>

Confirmation Dialog Box

A confirmation dialog box is mostly used to take user's consent on any option. It displays a dialog box with two buttons: OK and Cancel.

If the user clicks on the OK button, the window method confirm() will return true. If the user clicks on the Cancel button, then confirm() returns false. You can use a confirmation dialog box as follows.

Example

مربع حوار التأكيد يستخدم مربع حوار التأكيد في الغالب للحصول على موافقة المستخدم على أي خيار. يعرض مربع حوار به زرين: موافق وإلغاء. إذا قام المستخدم بالنقر فوق الزر "موافق" ، فإن طريقة النافذة "تأكيد" () ستعيد "صحيح". إذا قام المستخدم بالنقر فوق الزر "إلغاء" ، فتأكد () من إرجاع "خطأ". يمكنك استخدام مربع حوار التأكيد على النحو التالي. مثال

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function getConfirmation() {
               var retVal = confirm("Do you want to continue ?");
               if( retVal == true ) {
                  document.write ("User wants to continue!");
                  return true;
               } else {
                  document.write ("User does not want to continue!");
                  return false;
               }
            }
         //-->
      </script>     
   </head>
   
   <body>
      <p>Click the following button to see the result: </p>      
      <form>
         <input type = "button" value = "Click Me" onclick = "getConfirmation();" />
      </form>      
   </body>
</html>

Prompt Dialog Box

The prompt dialog box is very useful when you want to pop-up a text box to get user input. Thus, it enables you to interact with the user. The user needs to fill in the field and then click OK.

This dialog box is displayed using a method called prompt() which takes two parameters: (i) a label which you want to display in the text box and (ii) a default string to display in the text box.

This dialog box has two buttons: OK and Cancel. If the user clicks the OK button, the window method prompt() will return the entered value from the text box. If the user clicks the Cancel button, the window method prompt() returns null.

Example

The following example shows how to use a prompt dialog box −

مربع الحوار الفوري يعتبر مربع الحوار الفوري مفيدًا جدًا عندما تريد ظهور مربع نص منبثق للحصول على مدخلات المستخدم. وبالتالي ، فإنه يمكنك من التفاعل مع المستخدم. يحتاج المستخدم إلى ملء الحقل ثم النقر فوق "موافق". يتم عرض مربع الحوار هذا باستخدام طريقة تسمى موجه () تأخذ معلمتين: (1) تسمية تريد عرضها في مربع النص و (2) سلسلة افتراضية لعرضها في مربع النص. يحتوي مربع الحوار هذا على زرين: موافق وإلغاء. إذا قام المستخدم بالنقر فوق الزر "موافق" ، فسيعيد موجه أسلوب النافذة () القيمة التي تم إدخالها من مربع النص. إذا قام المستخدم بالنقر فوق الزر "إلغاء الأمر" ، فإن موجه أسلوب النافذة () يعود فارغًا. مثال يوضح المثال التالي كيفية استخدام مربع حوار موجه -

<html>
   <head>     
      <script type = "text/javascript">
         <!--
            function getValue() {
               var retVal = prompt("Enter your name : ", "your name here");
               document.write("You have entered : " + retVal);
            }
         //-->
      </script>      
   </head>
   
   <body>
      <p>Click the following button to see the result: </p>      
      <form>
         <input type = "button" value = "Click Me" onclick = "getValue();" />
      </form>      
   </body>
</html>
هل اعجبك الموضوع :

تعليقات