چگونه با عنصر گفتگوی HTML به راحتی مدال بسازیم

با این راهنمای مدال با عنصر گفتگوی HTML آشنا شوید.

دیالوگ ها و مدال ها بخش جدایی ناپذیر اکثر برنامه های کاربردی وب هستند. در حالی که ساختن آنها با دست کار پیچیده ای نیست، کاری است که به سرعت برای هر توسعه دهنده وب خسته کننده می شود. جایگزین معمول برای ساخت آنها با دست، استفاده از یک جزء ساخته شده توسط شخص دیگری است.

اگرچه چند مشکل در این رویکرد وجود دارد. گزینه‌های بسیار زیادی وجود دارد، دانستن اینکه کدام مؤلفه برای استفاده بهتر است، سخت می‌شود، و شخصی‌سازی ظاهر چنین مؤلفه‌هایی گاهی اوقات می‌تواند به اندازه ساختن دیالوگ با دست خسته‌کننده باشد. خوشبختانه، جایگزین دیگری نیز وجود دارد: عنصر گفتگوی HTML.

عنصر گفتگو چیست؟

عنصر گفتگوی HTML یک تگ HTML داخلی است (مانند div یا span) که به توسعه دهندگان اجازه می دهد تا دیالوگ ها و مدال های سفارشی ایجاد کنند. عنصر گفتگو از سال 2014 در کروم و اپرا وجود داشته است، اما اخیراً توسط همه مرورگرهای اصلی پشتیبانی شده است.

چرا از عنصر گفتگو استفاده کنیم؟

دلیل اصلی استفاده از عنصر گفتگو راحتی است. ساخت دیالوگ هایی که می توانند به صورت درون خطی ظاهر شوند یا به صورت مدال نشان داده شوند را آسان می کند، با چیزی بیش از یک تگ HTML و چند خط جاوا اسکریپت.

عنصر گفتگو نیاز به ساخت و اشکال زدایی یک گفتگوی سفارشی یا وارد کردن جزء شخص دیگری را حذف می کند. همچنین استایل دادن با CSS بسیار آسان است.

پشتیبانی مرورگر برای عنصر گفتگو

متأسفانه، پشتیبانی مرورگر از عنصر گفتگو می تواند بهتر باشد. در آخرین نسخه‌های همه مرورگرهای اصلی از مارس 2022، با برخی هشدارها، پشتیبانی می‌شود.

هر مرورگر فایرفاکس قدیمی‌تر از فایرفاکس 98 تنها در صورتی از آن پشتیبانی می‌کند که به صورت دستی در تنظیمات مرورگر فعال شده باشد و هر نسخه سافاری زودتر از سافاری 15.4 اصلاً از آن پشتیبانی نمی‌کند. جزئیات کامل پشتیبانی مرورگر در caniuse موجود است.

خوشبختانه، این بدان معنا نیست که عنصر گفتگو غیرقابل استفاده است. تیم Google Chrome یک polyfill دارد که می‌توانید در Github برای عنصر گفتگو پیدا کنید که حتی در مرورگرهایی که به صورت بومی پشتیبانی نمی‌شود، از آن پشتیبانی می‌کند.

مطلب مرتبط: یک پنجره بازشو با استفاده از HTML، CSS و جاوا اسکریپت ایجاد کنید

در شکل فعلی، عنصر گفتگو می تواند مشکلات دسترسی داشته باشد، بنابراین ممکن است استفاده از یک جزء گفتگوی سفارشی مانند مناسب تر باشد
a11y-dialog
در کاربردهای تولید

نحوه استفاده از عنصر گفتگو

برای نشان دادن نحوه استفاده از عنصر گفتگو، از آن برای ایجاد یک ویژگی وب سایت مشترک استفاده خواهید کرد: یک مدال تأیید برای دکمه حذف.

تنها چیزی که باید دنبال شود یک فایل HTML است.

1. فایل HTML را تنظیم کنید

با ایجاد فایل مذکور و نامگذاری آن index.html شروع کنید.

در مرحله بعد، ساختار فایل HTML را ایجاد کنید و برخی از متا اطلاعات اولیه را در مورد صفحه ارائه دهید تا در همه دستگاه ها به درستی رندر شود.

کد زیر را در index.html تایپ کنید:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Dialog demo</title>
</head>
 
<style></style>
 
<body></body>
 
<script></script>
</html>

این تمام تنظیمات لازم برای این پروژه است.

2. نوشتن نشانه گذاری

بعد، نشانه گذاری دکمه حذف و همچنین عنصر گفتگو را بنویسید.

کد زیر را در تگ بدنه index.html تایپ کنید:

<div class="button-container">
 <button>
   Delete item
 </button>
</div>

<dialog>
 <div>
     Are you sure you want to delete this item?
 </div>
 <div>
   <button class="close">
     Yes
   </button>
   
   <button class="close">
     No
   </button>
 </div>
</dialog>

HTML بالا ایجاد خواهد کرد:

یک دکمه حذف
عنصر گفتگو
دو دکمه در داخل دیالوگ.

مطلب مرتبط: نحوه پیاده سازی OAuth در یک برنامه Express با استفاده از GitHub

اگر index.html در مرورگر شما باز باشد، تنها عنصری که روی صفحه قابل مشاهده است دکمه حذف خواهد بود. این بدان معنا نیست که مشکلی وجود دارد، عنصر گفتگو فقط به کمی جاوا اسکریپت نیاز دارد تا قابل مشاهده باشد.

3. اضافه کردن جاوا اسکریپت

اکنون، کدی را بنویسید که وقتی کاربر روی دکمه حذف کلیک می‌کند، دیالوگ باز می‌شود، و همچنین کدی را بنویسید تا امکان بسته شدن گفتگو را فراهم کند.

عبارت زیر را در تگ اسکریپت index.html تایپ کنید:

const modal = document.querySelector("dialog")

document.querySelector(".button-container button").addEventListener("click", () => {
 modal.showModal();
});

const closeBtns = document.getElementsByClassName("close");

for (btn of closeBtns) {
 btn.addEventListener("click", () => {
   modal.close();
 })
}

این کد از روش querySelector برای دریافت ارجاع به دکمه ها و گفتگو استفاده می کند. سپس یک شنونده رویداد کلیکی را به هر دکمه متصل می کند.

ممکن است با شنوندگان رویداد در جاوا اسکریپت آشنا باشید که می توانید خودتان از آنها استفاده کنید. شنونده رویداد متصل به دکمه حذف، متد showModal() را فراخوانی می کند تا با کلیک روی دکمه، دیالوگ نمایش داده شود.

هر دکمه در داخل modal یک شنونده رویداد به آن متصل است که از متد ()close برای مخفی کردن دیالوگ هنگام کلیک روی آنها استفاده می کند.

حتی اگر جاوا اسکریپتی وجود نداشته باشد که متد ()close را در کد فراخوانی کند، کاربران همچنین می توانند با فشار دادن کلید escape روی صفحه کلید خود، modal را ببندند.

اکنون که این جاوا اسکریپت در جای خود قرار دارد، اگر کاربر روی دکمه حذف کلیک کند، مدال باز می شود و با کلیک بر روی دکمه بله یا خیر، مدال بسته می شود.

حالت باز شده باید به این صورت باشد:

یکی از نکات قابل توجه این است که عنصر گفتگو از قبل با مقداری استایل همراه است، حتی اگر CSS در index.html وجود نداشته باشد. مدال از قبل در مرکز قرار دارد، یک حاشیه دارد، عرض آن محدود به محتوا است، و دارای مقداری بالشتک پیش‌فرض است.

مطلب مرتبط: نحوه استفاده از Node.js Sessions برای ماندگاری داده ها

در حالی که مدال باز است، کاربران نمی توانند با هر چیزی در پس زمینه تعامل (کلیک، انتخاب) داشته باشند.

عنصر محاوره ای همچنین می تواند خود را به عنوان بخشی از جریان صفحه به جای اینکه به عنوان مدال نمایش دهد. برای امتحان کردن آن، اولین شنونده رویداد در جاوا اسکریپت را به این صورت تغییر دهید:

document.querySelector(".button-container button").addEventListener("click", () => { modal.show(); });

تنها چیزی که در این کد تغییر کرده این است که کد به جای متد showModal() متد show() را فراخوانی می کند. اکنون، زمانی که کاربر روی دکمه حذف آیتم کلیک می کند، مدال باید به صورت درون خطی باز شود:

4. Styling را اضافه کنید

در مرحله بعد، ظاهر دیالوگ و پس زمینه آن را با نوشتن CSS سفارشی کنید.

CSS مرز دیالوگ را کاهش می دهد، حداکثر عرض آن را محدود می کند و سپس پس زمینه را تیره می کند، و همچنین یک استایل کوچک به دکمه ها اضافه می کند.

استایل دادن به دیالوگ خود ساده است، اما کلاس شبه پس‌زمینه برای افزودن استایلی که پس‌زمینه گفتگو را هدف قرار می‌دهد، ضروری است.

کد زیر را در تگ سبک index.html قرار دهید:

dialog::backdrop {
  background: black;
  opacity: 0.5;
}

button {
  border-radius: 2px;
  background-color: white;
  border: 1px solid black;
  margin: 5px;
  box-shadow: 1px 1px 2px grey;
}

dialog {
  max-width: 90vw;
  border: 1px solid black;
}

وقتی دیالوگ باز است، اکنون باید به شکل زیر باشد:

و شما یک گفتگوی کاملاً کاربردی ساخته اید.

عنصر دیالوگ یک راه عالی برای ساخت مدال است

با استفاده از عنصر محاوره‌ای HTML که اخیراً در همه مرورگرهای اصلی پشتیبانی شده است، توسعه‌دهندگان وب اکنون می‌توانند مدال‌ها و دیالوگ‌های کاملاً کاربردی و به راحتی قابل تنظیم با یک تگ HTML و چند خط جاوا اسکریپت و بدون نیاز به تکیه بر راه‌حل شخص ثالث بسازند.

عنصر گفتگو دارای یک polyfill است که توسط تیم Google Chrome نگهداری می شود، که به توسعه دهندگان اجازه می دهد از گفتگو در نسخه های مرورگری که از آن پشتیبانی نمی کنند استفاده کنند.

Tags: اچ تی ام ال جاوا اسکریپت