HTML DOM Dialog অবজেক্ট

HTML DOM Dialog অবজেক্ট HTML5 <dialog> এলিমেন্টের সাথে জড়িত। এটি ওয়েব পেজে পপআপ, মডাল ইত্যাদি তৈরির জন্য ব্যবহৃত হয়। ডায়লগ বক্স দেখতে এবং ইউজারের সাথে ইন্টারঅ্যাক্ট করতে open অ্যাট্রিবিউটের মান সেট করা উচিত।

প্রপার্টি

Dialog অবজেক্টের প্রপার্টিগুলো:

মেথড

Dialog অবজেক্টের মেথডগুলো:

সিনট্যাক্স

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> নিচের বাটনে ক্লিক করলে dialog এলিমেন্ট তৈরি হবে</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>

আউটপুট

এটি নিচের আউটপুট তৈরি করবে:

CREATE বাটনে ক্লিক করলে:

উপরের উদাহরণে:

প্রথমে CREATE বাটন তৈরি করা হয়েছে যা ইউজার ক্লিক করলে createDialog() ফাংশন এক্সিকিউট করবে:

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

createDialog() ফাংশন createElement() মেথড ব্যবহার করে <dialog> এলিমেন্ট তৈরি করে। তারপর createTextNode() মেথড ব্যবহার করে কিছু টেক্সট যোগ করে।(createElement() মেথড ব্যবহার করে <dialog> এলিমেন্টের ভিতরে একটি বাটন তৈরি করে এবং createTextNode() মেথড ব্যবহার করে বাটনের টেক্সট যোগ করে।

setAttribute() মেথড ব্যবহার করে ডায়লগ বক্সের open অ্যাট্রিবিউটের মান সেট করা হয়েছে যাতে ইউজারকে প্রদর্শিত হয়। শেষে ডায়লগ বক্স এবং তার ভিতরের বাটনটি document.body appendChild() মেথড ব্যবহার করে ডকুমেন্ট বডিতে অ্যাপেন্ড করা হয়েছে <dialog> এবং <button> এলিমেন্ট প্যারামিটার হিসেবে পাস করে:

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); }