گفتگو

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

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

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

دیالوگ های مدال

در اینجا نمونه ای از <dialog> مودال آورده شده است. گفتگو را با دکمه "Open modal dialog" باز کنید. پس از باز کردن، سه راه برای بستن دیالوگ وجود دارد: کلید escape، ارسال فرم با دکمه ای که دارای مجموعه formmethod="dialog" است (یا اگر خود فرم دارای method="dialog" مجموعه باشد) و HTMLDialogElement.close() متد 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() نیز به طور مشابه یک دیالوگ را باز می کند، اما بدون افزودن پس زمینه یا باعث بی اثر شدن چیزی شود. کلید escape دیالوگ های غیر معین را نمی بندد. به همین دلیل، حصول اطمینان از استفاده از روشی برای بستن گفتگوی غیرمدال بسیار مهمتر است. در انجام این کار، اگر نزدیکتر خارج از گفتگو باشد، متوجه شوید که تمرکز روی عنصری است که گفتگو را باز کرده است، که ممکن است بهترین تجربه کاربر نباشد.

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

بستن یک گفتگو

برای بستن یک دیالوگ به متد 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() باز می شود، گفتگو بدون modal خواهد بود. ویژگی HTMLDialogElement.open بسته به اینکه گفتگو برای تعامل در دسترس باشد، true یا false را برمی گرداند - نه اینکه آیا مودال است یا نه.

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

توضیحات بیشتر

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

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

نقش های آریا

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

پیش فرض های CSS

توجه داشته باشید که مرورگرها یک استایل پیش فرض برای dialog ارائه می کنند. color: CanvasText; background-color: Canvas; و color: black; background-color: white; در شیوه نامه کاربر-عامل خود. color از dialog به ارث می رسد و نه از body یا :root ، که ممکن است غیرمنتظره باشد. ویژگی background-color به ارث نمی رسد.

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

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

چگونه به قسمت پشت دیالوگ استایل می دهید؟

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

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

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

درست!

با خاصیت background .

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