عنصر Dialog در HTML — از صفر تا صد

۲۴۹ بازدید
آخرین به‌روزرسانی: ۱۲ شهریور ۱۴۰۲
زمان مطالعه: ۳ دقیقه
عنصر Dialog در HTML — از صفر تا صد

دیالوگ‌ها در وب‌اپلیکیشن‌ها به طور مکرر استفاده می‌شوند. از آن‌ها برای نمایش پیام‌های تأیید، هشدارها و دیگر موارد که نیازمند محاوره با کاربر هستند بهره می‌گیریم. تا پیش از معرفی عنصر Dialog تنها تابع‌های alert و confirm را در جاوا اسکریپت داشتیم که پیام‌های صرفاً متنی را نمایش می‌دادند. امکان استایل‌بندی آن‌ها وجود نداشت و چیزی به جز متن نمایش نمی‌دادند. در این مقاله با عنصر Dialog در HTML آشنا می‌شویم و کارهایی که به وسیله آن‌ می‌توان انجام داد را با هم مرور می‌کنیم.

چنان که اشاره کردیم دیالوگ‌های alert و confirm مشکلات مختلفی داشتند، از جمله این که هیچ دکمه‌ای به جز دکمه‌های پیش‌فرض خودشان قبول نمی‌کردند. اما با معرفی عنصر Dialog می‌توانیم بدون افزودن کتابخانه‌های اضافی به پروژه کادرهای محاوره‌ای بازشونده زیبایی ایجاد کنیم.

ایجاد دیالوگ

برای ایجاد دیالوگ عنصر dialog را به صورت زیر اضافه می‌کنیم:

1<dialog open>
2  <p>Greetings!</p>
3</dialog>

بدین ترتیب یک عنصر dialog با خصوصیت open داریم که دیالوگ را نمایش می‌دهد. استایل‌بندی پیش‌فرض آن به مرورگر مورد استفاده بستگی دارد.

در مرورگر کروم ظاهر پیش‌فرض آن مانند زیر است:

Dialog در HTML

هر نوع کد HTML را می‌توانیم به عنصر dialog اضافه کنیم. برای نمونه می‌توانیم یک فرم مانند زیر در آن قرار دهیم:

1<dialog open>
2  <form method="dialog">
3    <p>
4      <label>
5        Name:
6      </label>
7      <input type='type' name='name'>
8    </p>
9    <p>
10      <label>
11        Favorite Fruit:
12      </label>
13      <select name='fruit'>
14        <option value='apple' selected>Apple</option>
15        <option value='banana'>Banana</option>
16        <option value='grape'>Grape</option>
17      </select>
18    </p>
19    <menu>
20      <button value="cancel">Cancel</button>
21      <button id="confirm-btn" value="default">Confirm</button>
22    </menu>
23  </form>
24</dialog>
25<menu>
26  <button id="dialog-button">Update Fruit</button>
27</menu>
28<output></output>

اینک dialog ما دارای یک عنصر form با متد method برای تعیین dialog است. بدین ترتیب می‌توانم مقداری از دیالوگ بازگشت دهیم که می‌تواند پس از بسته شدن dialog با کلیک روی Confirm مورد استفاده قرار گیرد. همچنین یک input و select داریم که به ما امکان می‌دهد چیزی را در فرم وارد کنیم. یک دکمه با ID dialog-button نیز داریم که برای باز کردن عنصر dialog استفاده می‌شود.

سپس در کد جاوا اسکریپت می‌توانیم باز و بسته شدن دیالوگ را کنترل کنیم و مقادیر وارد شده را به صورت زیر دریافت کنیم:

1const dialogButton = document.getElementById('dialog-button');
2const dialog = document.querySelector('dialog');
3const output = document.querySelector('output');
4const input = document.querySelector('input');
5const select = document.querySelector('select');
6const confirmBtn = document.getElementById('confirm-btn');
7dialogButton.addEventListener('click', () => {
8  if (typeof dialog.showModal === "function") {
9    dialog.showModal();
10  }
11});
12select.addEventListener('change', (e) => {
13  confirmBtn.value = [select.value, input.value].join(' ');
14});
15input.addEventListener('change', (e) => {
16  confirmBtn.value = [select.value, input.value].join(' ');
17});
18dialog.addEventListener('close', () => {
19  output.value = dialog.returnValue;
20});

متد showModal موجب باز شدن dialog می‌شود:

1dialogButton.addEventListener('click', () => {
2  if (typeof dialog.showModal === "function") {
3    dialog.showModal();
4  }
5});

سپس شنونده‌هایی برای دریافت مقادیر وارد شده از سوی کاربر در عناصر select و input تعریف کرده‌ایم:

1confirmBtn.value = [select.value, input.value].join(' ');

از کد فوق برای دریافت مقادیر input و select تعیین آن روی مشخصه value عنصر confirmBtn که دکمه تأیید است، استفاده می‌کنیم. همچنین returnValue مربوط به dialog را روی confirmBtn.value تعیین می‌کنیم. در نهایت در کد زیر:

1dialog.addEventListener('close', () => {
2  output.value = dialog.returnValue;
3});

returnValue را از confirmBtn.value که در شنونده‌های input و select انتساب یافته، دریافت می‌کنیم. در نهایت چیزی مانند زیر داریم:

Dialog در HTML

و زمانی که روی confirm کلیک کنیم، نتیجه زیر به دست می‌آید:

Dialog در HTML

استایل‌بندی پس‌زمینه

برای استایل پس‌زمینه dialog می‌توانیم آن را با استفاده از شبه عنصر CSS به نام ‎::backdrop انتخاب کرده و استایلی روی آن اعمال کنیم. این backdrop تنها زمانی رسم می‌شود که dialog در حالت نمایش باشد. برای نمونه می‌توانیم آن را به صورت زیر استایل‌بندی کنیم:

1dialog::backdrop {
2  background-color: lightblue !important;
3}

کد فوق موجب می‌شود که رنگ backdrop از رنگ پیش‌فرض به lightblue عوض شود. در نتیجه مانند تصویر زیر خواهد بود:

Dialog در HTML

سخن پایانی

عنصر dialog در زمان ایجاد کادرهای محاوره‌ای بازشونده موجب سهولت زیادی در کار می‌شود. بدین ترتیب دیگر نیازی به استفاده از کتابخانه‌های مختلف و یا کدنویسی زیادی برای ایجاد دیالوگ‌های ساده نخواهیم داشت. برای تعیین مقادیر dialog.returnValue در زمان بسته شدن دیالوگ method عنصر form را روی dialog تنظیم می‌کنیم و خصوصیت value دکمه تأیید را نیز روی آن چیزی که می‌خواهیم روی آن اعمال شود قرار می‌دهیم. همچنین می‌توانیم از شبه عنصر ‎::backdrop برای استایل دادن به رنگ پس‌زمینه dialog در زمان باز بودن آن استفاده کنیم.

اگر این مطلب برای شما مفید بوده است، آموزش‌ها و مطالب زیر نیز به شما پیشنهاد می‌شوند:

==

بر اساس رای ۰ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
javascript-in-plain-english
نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *