जावास्क्रिप्ट तीन महत्वपूर्ण प्रकार के डायलॉग बॉक्स का समर्थन करता है। इन डायलॉग बॉक्सों का उपयोग बढ़ाने और सतर्क करने, या किसी इनपुट पर पुष्टि प्राप्त करने या उपयोगकर्ताओं से एक प्रकार का इनपुट प्राप्त करने के लिए किया जा सकता है। यहां हम प्रत्येक डायलॉग बॉक्स पर एक-एक करके चर्चा करेंगे।
जावास्क्रिप्ट डायलॉग बॉक्स को लागू करने वाला कोड निम्नलिखित है -
उदाहरण
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
font-size: 18px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>Dialogue boxes</h1>
<div class="sample"></div>
<button class="alert">ALERT BOX</button>
<button class="confirm">CONFIRM BOX</button>
<button class="prompt">PROMPT BOX</button>
<h3>
Click on the above button to see their dialogue box
</h3>
<script>
let fillEle = document.querySelector(".sample");
document.querySelector('.alert').addEventListener('click',()=>{
alert('Hello World');
});
document.querySelector('.confirm').addEventListener('click',()=>{
confirm('Are you sure?');
});
document.querySelector('.prompt').addEventListener('click',()=>{
prompt('Enter your name');
})
</script>
</body>
</html> आउटपुट
"अलर्ट बॉक्स" बटन पर क्लिक करने पर -
"कन्फर्म बॉक्स" बटन पर क्लिक करने पर -
"प्रॉम्प्ट बॉक्स" बटन पर क्लिक करने पर -
