التخطي إلى المحتوى الرئيسي

الصناديق المنبثقة او Popup Boxes في JavaScript



الصناديق المنبثقة

هناك ثلاثة أنواع من الصناديق المنبثقة في الجافاسكربت JavaScript وهي : صندوق التنبيه و صندوق التوكيد و صندوق التذكير .

صندوق التنبيه

يستخدم صندوق التنبيه عادةً اذا أردت التأكد من المعلومات القادمة من المستخدم .
عند ظهور صندوق التنبيه سيتوجب على المستخدم الضغط على “موافق Ok” لإكمال العملية .

التركيبة

alert("نص بسيط");
 
مثال
<html>
<head>
<script type="text/javascript">
function show_alert()
{
alert("مرحباً أنا صندوق تنبيه جديد");
}

</script>
</head>

<body>

<input type="button" onclick="show_alert()" value="اضغط لإظهار صندوق التنبيه" />

</body>
</html>

صندوق التوكيد

يستخدم عادةً صندوق التوكيد اذا أردت التفعيل أو موافقة المستخدم على شيء معين .
عند ظهور صندوق التوكيد سيختار المستخدم للتوكيد اما الضغط على “OK” موافق أو “Cancel” إلغاء .
ان قمت بالضغط على “OK” ستعطي النتيجة صحيحة أما اذا ضغطت على “Cancel” ستعطي نتيجة خاطئة .

التركيبة

confirm("نص بسيط");
 
مثال
<html>
<head>
<script type="text/javascript">
function show_confirm() {
var r=confirm("اختر موافق أو إلغاء");
if (r==true) {
alert("قمت بالضغط على موافق");
} else {
alert("قمت بالضغط على إلغاء");
}
}

</script>
</head>
<body>

<input type="button" onclick="show_confirm()" value="اضغط لإضهار صندوق التوكيد" />

</body>
</html>

صندوق التذكير

يستخدم عادةً صندوق التذكير لوضع قيمة معينة قبل الدخول للصفحة .
عند ظهور صندوق التذكير سيتوجب على المستخدم الضغط اما على “OK” موافق أو “Cancel” إلغاء لإكمال العملية بعد ادخال القيمة .
ان قمت بالضغط على “OK” ستعطي النتيجة صحيحة أما اذا ضغطت على “Cancel” سيظهر على الصندوق فارغ .

التركيبة

prompt("نص بسيط","القيمة الافتراضية");
 
مثال
<head>
<script type="text/javascript">
function show_prompt() {
var name=prompt("الرجاء ادخل اسمك هنا","محمد");
if (name!=null && name!="") {
document.write("<p>مرحباً بك " + name + " , كيف حالك اليوم؟</p>");
}
}

</script>

<input type="button" onclick="show_prompt()" value="اضغط هنا" />

تعليقات