Introduction of JavaScript Popup
पॉपअप (Popup )एक छोटी दूसरी विंडो होती है जो current window के अंदर ही जावास्क्रिप्ट द्वारा उत्पन्न (generate) होती है। इन्हें popup boxes भी कहते है। Popup के द्वारा 3 तरह के काम किये जा सकते है।
- आप कोई भी अलर्ट प्रदर्शित कर सकते है।
- कोई भी कार्य करने से पहले यूजर से पुष्टि (confirm) कर सकते है।
- इनपुट की आवश्यकता होने पर यूज़र से इनपुट ले सकते है।
Types of Popup in JavaScript
JavaScript में पॉपअप उनके काम के अनुसार 3 तरह के होते है।
- Alert Dialog Box
- Confirm Dialog Box
- Prompt Dialog Box
Learn JavaScript in Hindi (Popup Boxes, Alert Box, Prompt Box, Confirm Box)
अगर आप जावास्क्रिप्ट में पॉपअप बॉक्स जैसे अलर्ट बॉक्स, प्रोम्पट बॉक्स और कन्फर्म बॉक्स कैसे प्रयोग करना है सीखना चाहते हैं तो नीचे दिया गया विडियो जरुर देखिये|
Alert Dialog Box
Alert box का प्रयोग यूज़र को महत्पूर्ण मेसेज (important message) प्रदर्शित करने के लिए किया जाता है। जब आप चाहते है की यूज़र आपके मेसेज को जरूर पढे ऐसी परिस्थिति (situation) में आप alert box प्रयोग कर सकते है।
ये बॉक्स current window से focus हटा देता है और सिर्फ मेसेज प्रदर्शित होता है। साथ ही alert box में एक ok का button भी होता है जिस पर क्लिक करने से alert box हट जाता है। JavaScript में alert dialog generate करने के लिए आप alert function call करते है। इस फंक्शन में आप जो मेसेज प्रदर्शित करना चाहते है उसे आर्गुमेंट (argument) की तरह लिखते है।
Example1: Displaying Alert
<html>
<head>
<title>Alert box demo</title>
</head>
<body>
<script type=”text/javascript”>
alert(“This is an alert box”);
</script>
</body>
</html>
Output
Confirm Dialog Box
Confirm dialog box यूज़र से किसी टास्क (task) के बारे में पुष्टि (confirmation) लेने के लिए प्रयोग किया जाता है। ये एक छोटी सी विंडो होती है जिसमे Yes और No बटन होते है। जिसमें से Yes बटन यूज़र की सहमती दर्शाता है और No बटन प्रदर्शित करता है की यूज़र आगे बढना (proceed) नहीं चाहता है।
JavaScript में Confirm dialog box generate करने के लिए आप confirm method को call करते है। इस मेथड में आप एक message argument की तरह pass करते है, जो यूज़र से पुष्टि (confirmation) मांगता है। जैसे की आप यूज़र से पूछते है की आप ये पुस्तक खरीदना चाहते है?
Example2: Confirm user action
<html>
<head>
<title>Confirm dialog demo</title>
</head>
<body>
<script type=”text/javascript”>
// Setting confirm box
if(confirm(“Do you want to buy this book?”))
{
// Print message when if user clicks OK
document.write(“User wants to buy the book”);
}
</script>
</body>
</html>
उपर दिये गए उदाहरण में यदि user confirm box में Yes सेलेक्ट करता है तो if statement में दिया गया message web page पर प्रिंट हो जाता है।
OUTPUT
यदि यूजर OK पर click करता है तो message show होता है नहीं तो कुछ भी show नहीं होता है।
Prompt Dialog Box
यदि आप यूजर से कोई इनपुट लेना चाहते है तो आप prompt dialog box यूज़ कर सकते है। Prompt dialog box में एक text-box होता है और एक ok button होता है। Text-box में user value input करता है। Prompt box create करने के लिए आप prompt() method को call करते है। इस method में 2 parameters pass किये जाते है। पहला parameter वो label होता है जो text-box में क्या वैल्यू डालनी है ये प्रदर्शित करता है। दूसरे parameter में text-box की default value pass की जाती है।
Example3: Taking user input
<html>
<head>
<title>prompt box demo</title>
</head>
<body>
<script type=”text/javascript”>
// Creating a prompt dialog
var age = prompt(“Enter your age”, 18);
document.write(“Age is :”,age);
</script>
</body>
</html>
Output
यूजर जो value input के रूप में देगा OK पर क्लिक करने पर उसे appropriate message के साथ प्रिंट किया जायेगा।
