JS पॉपअप बॉक्स

तीन Popup Functions

JavaScript तीन built-in blocking dialogs देता है: alert() एक OK बटन के साथ एक message दिखाता है, confirm() एक yes/no सवाल पूछता है और true या false return करता है, और prompt() text input मांगता है और entered string या cancel होने पर null return करता है।

उदाहरण: The Three Popup Functions

// Call `document.alert("Message with OK button")`
// Call `document.alert("Message with OK button")`
window.alert("Message with OK button");
// Declare the constant `confirmed`, set to `window.confirm("Are you sure?")`
// Declare the constant `confirmed`, set to `window.confirm("Are you sure?")`
const confirmed = window.confirm("Are you sure?");
// Declare the constant `name`, set to `window.prompt("Enter your name:")`
// Declare the constant `name`, set to `window.prompt("Enter your name:")`
const name = window.prompt("Enter your name:");
// Print `confirmed, name` to the console
// Print `confirmed, name` to the console
console.log(confirmed, name);

Blocking, Synchronous व्यवहार

तीनों popups user के जवाब देने तक script execution को पूरी तरह रोक देते हैं, जो modern JavaScript में असामान्य है जहाँ लगभग बाकी सब कुछ (fetch, timers, event handling) asynchronous है।

जब इनमें से कोई dialog खुला हो तो page पर कोई और code नहीं चलता।

उदाहरण: Blocking, Synchronous Behavior

console.log("before");
window.alert("Page is paused until you click OK");
console.log("after"); // doesn't log until alert is dismissed

Practice में Return Values

alert() हमेशा undefined return करता है क्योंकि इसमें सिर्फ एक OK बटन होता है, confirm() एक असली boolean return करता है जिस पर आप सीधे branch कर सकते हैं, और prompt() या तो टाइप की गई string या null return करता है, जिसे result इस्तेमाल करने से पहले जांचना ज़रूरी है ताकि cancel को खाली string न समझा जाए।

उदाहरण: Return Values in Practice

const result = window.alert("Just OK"); // always undefined
console.log(result);
const ok = window.confirm("Proceed?");
console.log(typeof ok); // "boolean"

Styling की सीमाएं

तीनों में से किसी भी dialog को CSS से style, reposition, या उनके text content से आगे customize नहीं किया जा सकता, क्योंकि ये खुद browser chrome द्वारा render होते हैं, page के DOM से नहीं। यह एक कठोर सीमा है, कोई workaround-able सीमा नहीं।

उदाहरण: Styling Limitations

window.alert("This cannot be styled with CSS or repositioned.");

Production UIs इन्हें क्यों टालते हैं

चूंकि ये पूरे page को block करते हैं और किसी site के visual design से मेल नहीं खा सकते, ज़्यादातर production interfaces इसके बजाय custom modal components बनाते हैं, native popups को ज़्यादातर quick debugging या बहुत कम-stakes वाले internal tools के लिए रखते हुए जहाँ blocking व्यवहार और default styling स्वीकार्य tradeoffs हैं।

उदाहरण: Why Production UIs Avoid Them

window.alert("Native popups are mostly for quick debugging.");