ডায়ালগ

ডায়ালগ এলিমেন্ট হল এইচটিএমএল-এ যেকোনো ধরনের ডায়ালগ উপস্থাপনের জন্য একটি দরকারী উপাদান, এটি কীভাবে কাজ করে তা খুঁজে বের করুন।

একটি মডেল ডায়ালগ হল একটি ওয়েব পৃষ্ঠার একটি বিশেষ ধরনের পপ-আপ বক্স: একটি পপ-আপ যা ব্যবহারকারীকে নিজের উপর ফোকাস করতে বাধা দেয়। একটি ডায়ালগ পপ আপ করার জন্য কিছু বৈধ ব্যবহারের ক্ষেত্রে আছে, কিন্তু এটি করার আগে মহান বিবেচনা করা উচিত। মডেল ডায়ালগগুলি ব্যবহারকারীদের নির্দিষ্ট বিষয়বস্তুর উপর ফোকাস করতে বাধ্য করে, এবং, অস্থায়ীভাবে অন্তত, পৃষ্ঠার বাকি অংশটিকে উপেক্ষা করে৷

ডায়ালগগুলি হয় মডেল হতে পারে (শুধুমাত্র ডায়ালগের বিষয়বস্তুর সাথে ইন্টারঅ্যাক্ট করা যেতে পারে) অথবা নন-মোডাল (এটি এখনও ডায়ালগের বাইরের বিষয়বস্তুর সাথে ইন্টারঅ্যাক্ট করা সম্ভব)। মোডাল ডায়ালগগুলি পৃষ্ঠার বাকি বিষয়বস্তুর উপরে প্রদর্শিত হয়। পৃষ্ঠার বাকি অংশ নিষ্ক্রিয় এবং, ডিফল্টরূপে, একটি আধা-স্বচ্ছ ব্যাকড্রপ দ্বারা অস্পষ্ট।

একটি ডায়ালগ তৈরি করার জন্য শব্দার্থিক HTML <dialog> উপাদানটি শব্দার্থবিদ্যা, কীবোর্ড মিথস্ক্রিয়া এবং HTMLDialogElement ইন্টারফেসের সমস্ত বৈশিষ্ট্য এবং পদ্ধতির সাথে আসে।

মডেল ডায়ালগ

এখানে একটি মডেল <dialog> এর একটি উদাহরণ। "ওপেন মডেল ডায়ালগ" বোতাম দিয়ে ডায়ালগটি খুলুন। একবার খোলা হলে, ডায়ালগটি বন্ধ করার তিনটি উপায় রয়েছে: এস্কেপ কী, formmethod="dialog" সেট আছে এমন একটি বোতামের সাহায্যে একটি ফর্ম জমা দেওয়া (অথবা যদি ফর্মটিতে method="dialog" সেট থাকে), এবং HTMLDialogElement.close() পদ্ধতি।

HTMLDialogElement তিনটি প্রধান পদ্ধতি রয়েছে, সাথে HTMLElement থেকে উত্তরাধিকারসূত্রে প্রাপ্ত সমস্ত পদ্ধতি।

dialog.show() /* opens the dialog */
dialog.showModal() /* opens the dialog as a modal */
dialog.close() /* closes the dialog */

কারণ এই <dialog> HTMLDialogElement.showModal() পদ্ধতির মাধ্যমে খোলা হয়েছে, এটি একটি মডেল ডায়ালগ। একটি মোডাল ডায়ালগ খোলার ফলে ডায়ালগ ব্যতীত অন্য সবকিছু নিষ্ক্রিয় এবং অস্পষ্ট হয়ে যায়। আপনি যদি ডায়ালগের বাইরে UI-এর উপর হোভার করেন, আপনি লক্ষ্য করবেন যে সমস্ত উপাদান এমনভাবে আচরণ করছে যেন pointer-events: none; সেট করা হয়েছিল; এমনকি যে বোতামটি ডায়ালগ খোলে সেটিও মিথস্ক্রিয়ায় প্রতিক্রিয়া দেখায় না।

ডায়ালগ খোলা হলে, ফোকাস ডায়ালগে চলে যায়। ফোকাস সেই ডায়ালগের মধ্যে ক্রমিক কীবোর্ড নেভিগেশন ক্রমে প্রথম উপাদানটিতে সেট করা হয়েছে। আপনি যদি tab কী বারবার আঘাত করেন, আপনি লক্ষ্য করবেন যে মোডাল ডায়ালগ খোলা থাকাকালীন ডায়ালগের মধ্যে শুধুমাত্র বিষয়বস্তু ফোকাস পেতে পারে। যতক্ষণ ডায়ালগ খোলা থাকে ততক্ষণ মডেল ডায়ালগের বাইরের সমস্ত কিছুই জড় থাকে।

যখন একটি ডায়ালগ বন্ধ করা হয়, মোডাল হোক বা না হোক, ফোকাস সেই উপাদানটিতে ফেরত দেওয়া হয় যা ডায়ালগটি খুলেছে। আপনি যদি ব্যবহারকারীর কর্মের উপর ভিত্তি করে নয় এমন একটি ডায়ালগ প্রোগ্রাম্যাটিকভাবে খোলেন, তাহলে পুনর্বিবেচনা করুন। আপনি যদি অবশ্যই, ডায়ালগ খোলার আগে ফোকাসটি যেখানে ছিল সেখানে ফিরিয়ে দেওয়া হয়েছে তা নিশ্চিত করুন, বিশেষ করে যদি ব্যবহারকারী এটির সাথে ইন্টারঅ্যাক্ট না করে ডায়ালগটি বাতিল করে দেয়।

একটি বিশ্বব্যাপী inert বৈশিষ্ট্য রয়েছে যা যেকোনো সক্রিয় ডায়ালগ ব্যতীত একটি উপাদান এবং তার সমস্ত বংশধরকে নিষ্ক্রিয় করতে ব্যবহার করা যেতে পারে। showModal() ব্যবহার করে একটি মোডাল ডায়ালগ খোলা হলে, জড়তা বা নিষ্ক্রিয়করণ বিনামূল্যে আসে; বৈশিষ্ট্য স্পষ্টভাবে সেট করা হয় না.

ব্যাকড্রপ যা ডায়ালগ ছাড়া অন্য সবকিছুকে অস্পষ্ট করে ::backdrop সিউডো-এলিমেন্ট ব্যবহার করে স্টাইল করা যেতে পারে। ব্যাকড্রপ শুধুমাত্র তখনই প্রদর্শিত হয় যখন একটি <dialog> .showModal() পদ্ধতিতে প্রদর্শিত হয়। এই ছদ্ম-উপাদানটি সমস্ত ব্যাকড্রপের সাথে মেলে, ফুলস্ক্রিন API ব্যবহার করার সময় প্রদর্শিত একটি সহ, যেমন পূর্ণ-স্ক্রীন মোডে একটি ভিডিও দেখার সময় যার স্ক্রীন বা মনিটরের অনুপাতের অনুপাত নেই।

নন-মোডাল ডায়ালগ

HTMLDialogElement.show() একইভাবে একটি ডায়ালগ খোলে, কিন্তু কোনো ব্যাকড্রপ যোগ না করে বা কোনো কিছুকে নিষ্ক্রিয় না করে। এস্কেপ কী নন-মোডাল ডায়ালগ বন্ধ করে না। এই কারণে, আপনি নন-মোডাল ডায়ালগ বন্ধ করার একটি পদ্ধতি অন্তর্ভুক্ত করেছেন তা নিশ্চিত করা আরও গুরুত্বপূর্ণ। এটি করার সময়, যদি ক্লোজার ডায়ালগের বাইরে থাকে, তাহলে বুঝতে হবে ফোকাস সেই উপাদানে যাবে যা ডায়ালগটি খুলেছে, যা ব্যবহারকারীর সেরা অভিজ্ঞতা নাও হতে পারে।

ডায়ালগ বন্ধ করার জন্য একটি বোতাম স্পেসিফিকেশন দ্বারা আনুষ্ঠানিকভাবে প্রয়োজন হয় না, এটি প্রয়োজনীয় হিসাবে বিবেচনা করুন। এস্কেপ কী একটি মোডাল ডায়ালগ বন্ধ করবে, কিন্তু নন-মোডাল নয়। ফোকাস গ্রহণ করতে সক্ষম একটি দৃশ্যমান বোতাম অ্যাক্সেসযোগ্যতা এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।

একটি ডায়ালগ বন্ধ করা হচ্ছে

একটি ডায়ালগ বন্ধ করতে আপনার HTMLDialogElement.close() পদ্ধতির প্রয়োজন নেই। আপনার জাভাস্ক্রিপ্টের প্রয়োজন নেই। জাভাস্ক্রিপ্ট ছাড়াই <dialog> বন্ধ করতে, বোতামে <form> অথবা formmethod="dialog" method="dialog" করে একটি ডায়ালগ পদ্ধতি সহ একটি ফর্ম অন্তর্ভুক্ত করুন।

যখন একজন ব্যবহারকারী dialog পদ্ধতির মাধ্যমে জমা দেন, তখন ব্যবহারকারীর প্রবেশ করা ডেটার অবস্থা বজায় থাকে। একটি জমা দেওয়ার ইভেন্ট থাকাকালীন — ফর্মটি সীমাবদ্ধতা যাচাইয়ের মধ্য দিয়ে যায় (যদি না novalidate সেট করা হয়) — ব্যবহারকারীর ডেটা সাফ বা জমা দেওয়া হয় না। জাভাস্ক্রিপ্ট ছাড়া একটি বন্ধ বোতাম এভাবে লেখা যেতে পারে:

<dialog open>
  <form method="dialog">
    <button type="submit" autofocus>close</button>
  </form>
</dialog>

আপনি এই উদাহরণে ক্লোজ <button> বোতাম>-এ autofocus অ্যাট্রিবিউট সেটটি লক্ষ্য করেছেন। <dialog> এর মধ্যে autofocus অ্যাট্রিবিউট সেট করা উপাদানগুলি পৃষ্ঠা লোডের উপর ফোকাস পাবে না (যদি না পৃষ্ঠাটি দৃশ্যমান ডায়ালগের সাথে লোড হয়)। ডায়ালগ খোলা হলে তারা ফোকাস পাবে।

ডিফল্টরূপে, যখন একটি ডায়ালগ খোলা হয়, ডায়ালগের মধ্যে প্রথম ফোকাসযোগ্য উপাদানটি ফোকাস পাবে যদি না ডায়ালগের মধ্যে একটি ভিন্ন উপাদানের autofocus বৈশিষ্ট্য সেট থাকে। ক্লোজ বোতামে autofocus অ্যাট্রিবিউট সেট করা নিশ্চিত করে যে ডায়ালগ খোলা হলে এটি ফোকাস পায়। কিন্তু <dialog> এর মধ্যে autofocus সহ শুধুমাত্র অনেক বিবেচনার সাথে করা উচিত। অটোফোকাসড এলিমেন্টের আগে অনুক্রমের সমস্ত উপাদান বাদ দেওয়া হয়। আমরা ফোকাস পাঠে এই বৈশিষ্ট্যটি আরও আলোচনা করব।

HTMLDialogElement ইন্টারফেসে একটি returnValue সম্পত্তি রয়েছে। একটি method="dialog" সহ একটি ফর্ম জমা দিলে ফর্মটি জমা দেওয়ার জন্য ব্যবহৃত সাবমিট বোতামটির name , যদি থাকে, তাহলে returnValue সেট করে। আমরা যদি <button type="submit" name="toasty">close</button> লিখতাম, তাহলে returnValue toasty হবে।

যখন একটি ডায়ালগ খোলা হয়, তখন বুলিয়ান open অ্যাট্রিবিউট উপস্থিত থাকে, যার অর্থ ডায়ালগ সক্রিয় থাকে এবং এর সাথে ইন্টারঅ্যাক্ট করা যায়। যখন .show() বা .showModal() এর মাধ্যমে open অ্যাট্রিবিউট যোগ করে একটি ডায়ালগ খোলা হয়, তখন ডায়ালগটি মোডাল-লেস হবে। HTMLDialogElement.open প্রপার্টি true বা false রিটার্ন করে, ডায়ালগটি ইন্টারঅ্যাকশনের জন্য উপলব্ধ কিনা তার উপর নির্ভর করে - এটি মডেল কি না।

যদিও জাভাস্ক্রিপ্ট একটি ডায়ালগ খোলার পছন্দের পদ্ধতি, পৃষ্ঠা লোডের open বৈশিষ্ট্য সহ, এবং তারপর এটিকে .close() দিয়ে সরিয়ে দেওয়া, জাভাস্ক্রিপ্ট না থাকলেও ডায়ালগটি উপলব্ধ রয়েছে তা নিশ্চিত করতে সহায়তা করতে পারে।

অতিরিক্ত বিবরণ

tabindex ব্যবহার করবেন না

যে উপাদানটি ডায়ালগ খুলতে সক্রিয় করা হয় এবং এতে থাকা ক্লোজ বোতামটি (এবং সম্ভবত অন্যান্য বিষয়বস্তু) ফোকাস গ্রহণ করতে পারে এবং ইন্টারেক্টিভ হয়। <dialog> উপাদানটি ইন্টারেক্টিভ নয় এবং ফোকাস গ্রহণ করে না। ডায়ালগে tabindex বৈশিষ্ট্য যোগ করবেন না।

ARIA ভূমিকা

অন্তর্নিহিত ভূমিকা হল dialog । যদি ডায়ালগ একটি নিশ্চিতকরণ উইন্ডো হয় যা একটি গুরুত্বপূর্ণ বার্তা যোগাযোগ করে যার জন্য নিশ্চিতকরণ বা অন্য ব্যবহারকারীর প্রতিক্রিয়া প্রয়োজন, সেট করুন role="alertdialog" । ডায়ালগের একটি অ্যাক্সেসযোগ্য নামও থাকা উচিত৷ যদি দৃশ্যমান পাঠ্য অ্যাক্সেসযোগ্য নামের জন্য প্রদান করতে পারে, aria-labelledby="idOfLabelingText" যোগ করুন।

CSS ডিফল্ট

মনে রাখবেন যে ব্রাউজারগুলি dialog জন্য ডিফল্ট স্টাইলিং প্রদান করে। ফায়ারফক্স, ক্রোম এবং এজ সেটের color: CanvasText; background-color: Canvas; এবং Safari সেট color: black; background-color: white; তাদের ব্যবহারকারী-এজেন্ট স্টাইলশীটে। color dialog থেকে উত্তরাধিকারসূত্রে প্রাপ্ত হয়েছে এবং body বা :root থেকে নয়, যা অপ্রত্যাশিত হতে পারে। background-color সম্পত্তি উত্তরাধিকারসূত্রে পাওয়া যায় না।

আপনার উপলব্ধি পরীক্ষা করুন

ডায়ালগ উপাদান আপনার জ্ঞান পরীক্ষা.