HTML DOM Dialog ऑब्जेक्ट

HTML DOM Dialog ऑब्जेक्ट HTML5 <dialog> तत्व से जुड़ा होता है। इसका उपयोग वेब पेज पर पॉपअप, मोडल आदि बनाने के लिए किया जाता है। डायलॉग बॉक्स को देखने और यूज़र को इसके साथ इंटरैक्ट करने देने के लिए open attribute का मान सेट किया जाना चाहिए।

गुण (Properties)

Dialog ऑब्जेक्ट के लिए निम्नलिखित गुण हैं:

विधियाँ (Methods)

Dialog ऑब्जेक्ट के लिए निम्नलिखित विधियाँ हैं:

सिंटैक्स

डायलॉग ऑब्जेक्ट बनाने के लिए सिंटैक्स:

var p = document.createElement("DIALOG");

उदाहरण

आइए HTML DOM dialog ऑब्जेक्ट का एक उदाहरण देखते हैं:

<!DOCTYPE html> <html> <head> 
<title>DIALOG OBJECT</title> 
<style> 
  dialog{ 
    border:2px solid blue; 
    font-weight:bold; 
  } 
</style> </head> <body> 
<p> नीचे दिए गए बटन पर क्लिक करने से एक डायलॉग तत्व बनेगा</p> 
<button onclick="createDialog()">CREATE</button> 
<script> 
  function createDialog() { 
    var dlg = document.createElement("DIALOG"); 
    var dlgTxt = document.createTextNode("बटन के साथ DIALOG विंडो"); 
    var bl=document.createElement("BR"); 
    var btn = document.createElement("BUTTON"); 
    var btnText=document.createTextNode("यहाँ क्लिक करें"); 
    dlg.setAttribute("open", "open"); 
    dlg.appendChild(dlgTxt); 
    dlg.appendChild(bl); 
    btn.appendChild(btnText); 
    dlg.appendChild(btn); 
    document.body.appendChild(dlg); 
  } 
</script> </body> </html>

आउटपुट

यह निम्नलिखित आउटपुट देगा:

CREATE बटन पर क्लिक करने पर:

उदाहरण की व्याख्या

उपरोक्त उदाहरण में:

• हमने पहले एक बटन CREATE बनाया जो यूज़र द्वारा क्लिक किए जाने पर createDialog() फंक्शन को एक्ज़िक्यूट करता है:

<button onclick="createDialog()">CREATE</button>

• createDialog() फंक्शन createElement() मेथड का उपयोग करके <dialog> तत्व बनाता है। फिर यह createTextNode() मेथड का उपयोग करके इसमें कुछ टेक्स्ट जोड़ता है। हम फिर createElement() मेथड का उपयोग करके <dialog> तत्व के अंदर एक बटन बनाते हैं और createTextNode() मेथड का उपयोग करके बटन टेक्स्ट जोड़ते हैं।
• setAttribute() मेथड का उपयोग करके हम यूज़र को प्रदर्शित करने के लिए डायलॉग बॉक्स के open attribute का मान सेट करते हैं। अंत में डायलॉग बॉक्स को उसके अंदर बटन के साथ document.body appendChild() मेथड का उपयोग करके और <dialog> और <button> तत्व को पैरामीटर के रूप में पास करके दस्तावेज़ बॉडी में जोड़ा जाता है:

function createDialog() { 
  var dlg = document.createElement("DIALOG"); 
  var dlgTxt = document.createTextNode("बटन के साथ DIALOG विंडो"); 
  var bl=document.createElement("BR"); 
  var btn = document.createElement("BUTTON"); 
  var btnText=document.createTextNode("यहाँ क्लिक करें"); 
  dlg.setAttribute("open", "open"); 
  dlg.appendChild(dlgTxt); 
  dlg.appendChild(bl); 
  btn.appendChild(btnText); 
  dlg.appendChild(btn); 
  document.body.appendChild(dlg); 
}