کادر گفتگو

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

کادرهای گفتگو می‌توانند:

• مدال: کاربران فقط می‌توانند با محتوای داخل کادر گفتگو تعامل داشته باشند. کادرهای گفتگوی مُدال در بالای محتوای صفحه نمایش داده می‌شوند. صفحه روی inert تنظیم شده است و به‌طور پیش‌فرض با پس‌زمینه نیمه‌شفاف پوشانده شده است.
• غیرمدال: کاربران می‌توانند با محتوای خارج از کادر گفتگو تعامل داشته باشند.

عنصر معنایی HTML <dialog> برای ایجاد کادر گفتگو با معناشناسی، تعاملات صفحه‌کلید، و همه ویژگی‌ها و روش‌های میانای HTMLDialogElement ارائه می‌شود.

کادرهای گفتگوی مدال

به نمونه‌ای از <dialog> مدال نگاه کنید. روی باز کردن کادر گفتگوی مدال کلیک کنید. پس‌از باز شدن، سه راه برای بستن کادر گفتگو وجود دارد: کلید escape، ارسال فرم با دکمه‌ای که 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() باز شده است، یک کادر گفتگوی مدال است. باز کردن کادر گفتگوی مدال، همه چیز را به‌جز خود کادر گفتگو غیرفعال و پنهان می‌کند. وقتی نشانگر را روی میانای کاربر خارج از کادر گفت‌وگو نگه می‌دارید، همه عناصر طوری رفتار می‌کنند که گویی pointer-events: none; تنظیم شده است. حتی دکمه‌ای که کادر گفتگو را باز می‌کند به تعاملات واکنش نشان نخواهد داد.

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

وقتی کادر گفتگویی بسته می‌شود، چه کیفیتی باشد چه نباشد، تمرکز به عنصری برمی‌گردد که کادر گفتگو را باز کرده است. از باز کردن کادر گفتگو به‌صورت برنامه‌نویسی‌شده بدون کنش کاربر اجتناب کنید. اگر مجبورید، مطمئن شوید که تمرکز را به جایی که قبل‌از باز شدن کادر گفتگو بود برمی‌گردانید، به‌ویژه اگر کاربر کادر گفتگو را بدون تعامل با آن ببندد.

مشخصه سراسری inert وجود دارد که می‌توان از آن برای غیرفعال کردن عنصر و همه فرزندان آن، به‌جز هرگونه کادر گفتگوی فعال، استفاده کرد. وقتی کادر گفتگوی مدال بااستفاده از showModal() باز می‌شود، بی‌حرکتی یا غیرفعال‌سازی به‌طور پیش‌فرض رخ می‌دهد. مشخصه به‌طور صریح تنظیم نشده است.

پس‌زمینه‌ای که همه چیز را به‌جز کادر گفتگو پنهان می‌کند می‌تواند بااستفاده از شبه‌عنصر ::backdrop سبک‌بندی شود. پساویز فقط زمانی نمایش داده می‌شود که <dialog> با روش .showModal() نمایش داده شود. این شبه‌عنصر با همه پساویزها مطابقت دارد، ازجمله پساویزی که هنگام استفاده از FullScreen API نمایش داده می‌شود، مثلاً هنگام مشاهده ویدیو در حالت تمام‌صفحه که نسبت ابعادی آن با صفحه‌نمایش یا نمایشگر یکسان نیست.

کادرهای گفتگوی غیرمُدال

‫HTMLDialogElement.show() نیز به‌طور مشابه کادر گفتگویی را باز می‌کند، اما بدون افزودن پساویز یا ایجاد هرگونه حالت بی‌حرکت. کلید خروج فقط کادرهای گفتگوی مدال را می‌بندد، نه کادرهای گفتگوی غیرمدال. به‌همین دلیل، گنجاندن روشی برای بستن کادر گفتگوی غیرمُدال اهمیت بیشتری پیدا می‌کند. اگر گزینه بستن خارج از کادر گفتگو باشد، تمرکز به عنصری که کادر گفتگو را باز کرده است برمی‌گردد. این تجربه کاربری ایده‌آلی نیست.

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

بستن کادر گفتگو

برای بستن کادر گفتگو به روش HTMLDialogElement.close() نیاز ندارید. اصلاً به جاوا اسکریپت نیاز ندارید. برای بستن <dialog> بدون جاوا اسکریپت، فرمی با روش گفتگو اضافه کنید و method="dialog" را روی <form> یا formmethod="dialog" روی دکمه تنظیم کنید.

وقتی کاربر با روش dialog ارسال می‌کند، وضعیت داده‌های واردشده توسط کاربر حفظ می‌شود. وقتی رویداد ارسال وجود دارد، فرم از اعتبارسنجی محدودیت عبور می‌کند (مگر اینکه novalidate تنظیم شده باشد). داده‌های کاربر پاک‌سازی یا ارسال نشده است. می‌توانید بدون جاوا اسکریپت دکمه بستن ایجاد کنید:

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

ممکن است متوجه شده باشید که مشخصه autofocus روی دکمه بستن <button> در این مثال تنظیم شده است. عناصر دارای مشخصه autofocus تنظیم‌شده در <dialog> فقط زمانی در بار کردن صفحه تمرکز دریافت می‌کنند که صفحه قبلاً با کادر گفتگوی نمایان بار شده باشد. اگر صفحه بار نشده باشد، این عناصر هنگام باز شدن کادر گفتگو، تمرکز را دریافت می‌کنند.

وقتی کادر گفتگویی باز می‌شود، اولین عنصر قابل‌تمرکز در کادر گفتگو تمرکز را دریافت می‌کند، مگر اینکه عنصر دیگری دارای مجموعه مشخصه autofocus باشد. تنظیم کردن ویژگی autofocus روی دکمه بستن تضمین می‌کند که وقتی کادر گفتگوی باز می‌شود، تمرکز را دریافت می‌کند. اما گنجاندن autofocus در <dialog> باید با دقت زیاد انجام شود. همه عناصر موجود در توالی که قبل‌از عنصر دارای فوکوس خودکار قرار دارند نادیده گرفته می‌شوند. در واحد تمرکز بیشتر درباره این مشخصه بحث می‌کنیم.

میانای HTMLDialogElement شامل ویژگی returnValue است. ارسال فرم با method="dialog"، returnValue را روی name (درصورت وجود) دکمه ارسال استفاده‌شده برای ارسال فرم تنظیم می‌کند. اگر <button type="submit" name="toasty">close</button> را می‌نوشتیم، returnValue برابر با toasty می‌شد.

وقتی کادر گفتگویی باز می‌شود، مشخصه بولی open وجود دارد، یعنی کادر گفتگو فعال است و می‌توان با آن تعامل داشت. وقتی کادر گفتگویی با افزودن مشخصه open باز می‌شود، نه با .show() یا .showModal()، کادر گفتگو بدون حالت است. ویژگی HTMLDialogElement.open بسته به اینکه کادر گفتگو برای تعامل دردسترس باشد یا نه، true یا false را برمی‌گرداند—نه اینکه آیا مدال است یا نه.

درحالی‌که جاوا اسکریپت روش ترجیحی برای باز کردن کادر گفتگو است، گنجاندن ویژگی open در بارگیری صفحه و سپس برداشتن آن با .close() می‌تواند کمک کند تا مطمئن شوید کادر گفتگو حتی زمانی که جاوا اسکریپت دردسترس نیست، دردسترس باشد.

جزئیات اضافی

استفاده نکردن از tabindex

عنصری که برای باز کردن کادر گفتگو فعال می‌شود و دکمه بستن موجود در آن (و احتمالاً محتوای دیگر) می‌توانند تمرکز را دریافت کنند و تعاملی هستند. عنصر <dialog> تعاملی نیست و تمرکز دریافت نمی‌کند. ویژگی tabindex را به خود کادر گفتگو اضافه نکنید.

نقش‌های برنامه‌های اینترنتی غنی قابل‌دسترس

نقش ضمنی dialog است. اگر کادر گفتگوی پنجره تأییدی است که پیامی را منتقل می‌کند که به پاسخ یا تأیید کاربر نیاز دارد، role="alertdialog" را تنظیم کنید. نامی دسترس‌پذیر برای کادر گفتگو اضافه کنید. اگر نوشتار رؤیت‌پذیر می‌تواند نام دسترس‌پذیر را ارائه دهد، aria-labelledby="idOfLabelingText" را اضافه کنید.

پیش‌فرض‌های CSS

مرورگرها سبک‌پردازی پیش‌فرض را برای dialog ارائه می‌دهند. ‫Firefox،‏ Chrome، و Edge color: CanvasText; و background-color: Canvas; را تنظیم می‌کنند. Safari color: black; background-color: white; را در برگه‌های سبک نگارش نماینده کاربر خود تنظیم می‌کند. ‫color از dialog به‌ارث برده شده است، نه از body یا :root، که ممکن است غیرمنتظره باشد. خصوصیت background-color به ارث برده نشده است.

میزان درک خود را بررسی کنید

دانش خود را درباره عنصر گفتگو محک بزنید.

چگونه ناحیه پشت کادر گفتگو را سبک‌بندی می‌کنید؟

با شبه‌عنصر ::background.

دوباره امتحان کنید.

با شبه‌عنصر ::backdrop.

صحیح!

با خصوصیت background.

دوباره امتحان کنید.