HTML DOM डायलॉग ऑब्जेक्ट HTML5 <डायलॉग> एलिमेंट से जुड़ा है। इसका उपयोग वेब पेज पर पॉपअप, मोडल आदि बनाने के लिए किया जाता है। डायलॉग बॉक्स देखने के लिए और यूजर को इसके साथ इंटरैक्ट करने के लिए ओपन एट्रिब्यूट वैल्यू सेट की जानी चाहिए।
गुण
डायलॉग ऑब्जेक्ट के गुण निम्नलिखित हैं -
| संपत्ति | विवरण |
|---|---|
| खुला | यह सेट करने या वापस करने के लिए कि संवाद खोला जाना चाहिए या नहीं। |
| रिटर्न वैल्यू | संवाद का वापसी मान सेट करने या वापस करने के लिए। |
तरीके
डायलॉग ऑब्जेक्ट के लिए निम्नलिखित तरीके हैं -
| विधि | विवरण |
|---|---|
| बंद करें () | संवाद बंद करने के लिए। |
| दिखाएं() | संवाद दिखाने के लिए। |
| showModal() | सबसे शीर्ष संवाद बॉक्स बनाने और उसे प्रदर्शित करने के लिए। |
सिंटैक्स
−
. के लिए वाक्य रचना निम्नलिखित हैडायलॉग ऑब्जेक्ट बनाना -
var p = document.createElement("DIALOG"); उदाहरण
आइए HTML DOM डायलॉग ऑब्जेक्ट के लिए एक उदाहरण देखें -
<!DOCTYPE html>
<html>
<head>
<title>DIALOG OBJECT</title>
<style>
dialog{
border:2px solid blue;
font-weight:bold;
}
</style>
</head>
<body>
<p> Clicking on the button below will create a dialog element</p>
<button onclick="createDialog()">CREATE</button>
<script>
function createDialog() {
var dlg = document.createElement("DIALOG");
var dlgTxt = document.createTextNode("DIALOG WINDOW with a button");
var bl=document.createElement("BR");
var btn = document.createElement("BUTTON");
var btnText=document.createTextNode("CLICK HERE");
dlg.setAttribute("open", "open");
dlg.appendChild(dlgTxt);
dlg.appendChild(bl);
btn.appendChild(btnText);
dlg.appendChild(btn);
document.body.appendChild(dlg);
}
</script>
</body>
</html> आउटपुट
यह निम्नलिखित आउटपुट देगा -
क्रिएट बटन पर क्लिक करने पर -
उपरोक्त उदाहरण में -
हमने सबसे पहले एक बटन बनाया है जो उपयोगकर्ता द्वारा क्लिक किए जाने पर createDialog () फ़ंक्शन को निष्पादित करेगा -
<button onclick="createDialog()">CREATE</button>
createDialog () फ़ंक्शन createElement () विधि का उपयोग करके <संवाद> तत्व बनाता है। इसके बाद यह createTextNode() विधि का उपयोग करके इसमें कुछ टेक्स्ट जोड़ता है। फिर हम createElement() विधि का उपयोग करके
setAttribute() विधि का उपयोग करके हम उपयोगकर्ता को प्रदर्शित करने के लिए डायलॉग बॉक्स का ओपन एट्रिब्यूट मान सेट करते हैं। अंत में इसके अंदर के बटन के साथ डायलॉग बॉक्स को document.body appendChild() विधि का उपयोग करके और
function createDialog() {
var dlg = document.createElement("DIALOG");
var dlgTxt = document.createTextNode("DIALOG WINDOW with a button");
var bl=document.createElement("BR");
var btn = document.createElement("BUTTON");
var btnText=document.createTextNode("CLICK HERE");
dlg.setAttribute("open", "open");
dlg.appendChild(dlgTxt);
dlg.appendChild(bl);
btn.appendChild(btnText);
dlg.appendChild(btn);
document.body.appendChild(dlg);
}