عناصر تعاملی بومی؛ details، dialog و popover | HTML از صفر؛ ساخت وب‌سایت

همیشه به کدنویسی رفتار از صفر نیاز نیست

برای توضیح باز و بسته‌شونده از details و summary استفاده کن. summary عنوان قابل‌فعال‌سازی است؛ open حالت اولیهٔ باز را مشخص می‌کند.

<details>
  <summary>آیا پیش‌نیاز لازم است؟</summary>
  <p>خیر، از صفر شروع می‌کنیم.</p>
</details>

با Tab و Enter یا Space این کنترل بومی را آزمایش کن. داخل summary کنترل‌های تعاملی تودرتو نگذار.

dialog برای پنجرهٔ گفتگو است. ویژگی open آن را غیرمودال نشان می‌دهد؛ حالت مودال با متد showModal() در JavaScript باز می‌شود و با open ساده یکسان نیست. داخل dialog می‌توان form با method="dialog" گذاشت تا دکمهٔ ارسال، گفتگو را ببندد.

<dialog open aria-labelledby="dialog-title">
  <h2 id="dialog-title">اطلاعات کارگاه</h2>
  <p>پیش‌نیازی لازم نیست.</p>
  <form method="dialog"><button>بستن</button></form>
</dialog>

در مرورگرهای پشتیبان، popover می‌تواند بدون JavaScript با دکمهٔ ارجاع‌دهنده باز شود:

<button type="button" popovertarget="help">نمایش راهنما</button>
<div id="help" popover>فرم را با اطلاعات ساختگی آزمایش کن.</div>

popover پنجرهٔ مودال نیست و معنای dialog را خودکار ندارد. برای نیازهای پیچیده، مدیریت فوکوس و رفتار را جداگانه طراحی کن و سازگاری مرورگر مقصد را بررسی کن.

منابع: dialog در MDN و popover در MDN.