תיבת דו-שיח מודאלית היא סוג מיוחד של תיבה קופצת שקוטעת את המשתמש בדף אינטרנט. יש כמה תרחישים לדוגמה שבהם כדאי להקפיץ תיבת דו-שיח, אבל צריך לשקול היטב לפני שמוסיפים אותה. תיבות דו-שיח מודאליות מאלצות את המשתמשים להתמקד בתוכן ספציפי ולהתעלם באופן זמני משאר הדף.
תיבות הדו-שיח יכולות להיות:
- מודאלי: המשתמשים יכולים לבצע פעולות רק בתוכן שבתיבת הדו-שיח. תיבות דו-שיח מודאליות מוצגות מעל תוכן הדף. הדף מוגדר כ-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() פותח תיבת דו-שיח באופן דומה, אבל בלי להוסיף רקע או לגרום למשהו להפוך ללא פעיל. מקש Escape סוגר רק תיבות דו-שיח מודאליות, ולא תיבות דו-שיח לא מודאליות. לכן, חשוב עוד יותר לכלול דרך לסגור את תיבת הדו-שיח הלא-מודאלית. אם אפשרות הסגירה נמצאת מחוץ לתיבת הדו-שיח, המיקוד יחזור לרכיב שפתח את תיבת הדו-שיח. זו חוויית משתמש לא אידיאלית.
למרות שכפתור לסגירת תיבת הדו-שיח לא נדרש באופן רשמי לפי המפרט, כדאי להתייחס אליו כנדרש. כפתור גלוי שאפשר להתמקד בו משפר את הנגישות ואת חוויית המשתמש.
סגירת תיבת דו-שיח
לא צריך את השיטה HTMLDialogElement.close() כדי לסגור תיבת דו-שיח. אתם לא צריכים JavaScript בכלל. כדי לסגור את <dialog> בלי JavaScript, צריך לכלול טופס עם שיטת תיבת דו-שיח על ידי הגדרת method="dialog" ב-<form> או formmethod="dialog" בכפתור.
כשמשתמש שולח טופס באמצעות השיטה dialog, המצב של הנתונים שהמשתמש הזין נשמר. כשיש אירוע שליחה, הטופס עובר אימות אילוצים (אלא אם מוגדר novalidate). נתוני המשתמש לא נמחקים או נשלחים. אפשר ליצור לחצן סגירה בלי JavaScript:
<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, בהתאם לזמינות של תיבת הדו-שיח לאינטראקציה, ולא בהתאם לשאלה אם היא מודאלית או לא.
למרות ש-JavaScript היא השיטה המועדפת לפתיחת תיבת דו-שיח, הוספת המאפיין open בזמן טעינת הדף והסרתו באמצעות .close() יכולה לעזור לוודא שתיבת הדו-שיח זמינה גם כש-JavaScript לא זמינה.
פרטים נוספים
לא להשתמש ב-tabindex
הרכיב שמופעל כדי לפתוח את תיבת הדו-שיח וכפתור הסגירה שכלול בה (ואולי גם תוכן אחר) יכולים לקבל את המיקוד והם אינטראקטיביים. הרכיב <dialog> לא אינטראקטיבי ולא מקבל מיקוד. אל תוסיפו את המאפיין tabindex לתיבת הדו-שיח עצמה.
תפקידי ARIA
התפקיד המשתמע הוא 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.