תיבת דו-שיח מודאלית היא סוג מיוחד של תיבה קופצת בדף אינטרנט: חלון קופץ שמפריע למשתמש להתמקד בעצמו. יש כמה תרחישים לדוגמה לפתיחת תיבת דו-שיח, אבל כדאי לשקול היטב לפני שעושים זאת. תיבות דו-שיח מודאליות מאלצות את המשתמשים להתמקד בתוכן ספציפי, ולהימנע זמנית לפחות משאר הדף.
תיבות הדו-שיח יכולות להיות מודולריות (אפשר לתקשר רק עם התוכן בתיבת הדו-שיח) או לא מודאליות (עדיין אפשר ליצור אינטראקציה עם תוכן מחוץ לתיבת הדו-שיח). תיבות דו-שיח מודולריות מוצגות בחלק העליון של שאר תוכן הדף. שאר הדף הוא 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> נפתח באמצעות method HTMLDialogElement.showModal(), לכן זוהי תיבת דו-שיח של מודל. פתיחת תיבת דו-שיח בחלון מודאלי משביתה ומסתירה את כל התוכן מלבד תיבת הדו-שיח עצמה. אם תעבירו את העכבר מעל ממשק המשתמש מחוץ לתיבת הדו-שיח, תוכלו לראות שכל הרכיבים מתנהגים כאילו מוגדר הערך pointer-events: none;, גם הלחצן שפותח את תיבת הדו-שיח לא מגיב לאינטראקציות.
כשתיבת הדו-שיח נפתחת, המיקוד עובר לתיבת הדו-שיח. המיקוד מוגדר ברכיב הראשון שבסדר הניווט הרציף במקלדת, בתיבת הדו-שיח הזו.
אם תקישו על המקש tab שוב ושוב, תשימו לב שרק התוכן שבתוך תיבת הדו-שיח יכול להתרכז בזמן שתיבת הדו-שיח פתוחה. כל מה שמחוץ לתיבת הדו-שיח המודאלית יישאר ללא שינוי כל עוד תיבת הדו-שיח פתוחה.
כשתיבת דו-שיח נסגרת, בחלון מודאלי או לא, המיקוד מוחזר לרכיב שפתח את תיבת הדו-שיח. אם אתם פותחים באופן פרוגרמטי תיבת דו-שיח שלא מבוססת על פעולת משתמש, שקלו זאת מחדש. במקרה הצורך, ודאו שהמיקוד יוחזר למקום שבו הוא היה לפני פתיחת תיבת הדו-שיח, במיוחד אם המשתמש סוגר את תיבת הדו-שיח בלי לקיים איתה אינטראקציה.
יש מאפיין גלובלי inert שאפשר להשתמש בו כדי להשבית רכיב ואת כל הצאצאים שלו, מלבד כל תיבת דו-שיח
פעילה. כשפותחים תיבת דו-שיח מודאלית באמצעות showModal(), ההתמדה או ההשבתה מוצעות בחינם. המאפיין
לא מוגדר באופן מפורש.
אפשר לעצב את הרקע שמסתיר את כל התוכן מלבד תיבת הדו-שיח באמצעות פסאודו-רכיב ::backdrop. הרקע מוצג רק כאשר <dialog> מוצג עם השיטה .showModal(). פסאודו-הרכיב הזה תואם לכל תמונות הרקע, כולל זו שמוצגת כשנעשה שימוש ב-FullScreen API. למשל, כשצופים בסרטון במצב מסך מלא שיחס הגובה-רוחב שלו שונה מיחס הגובה-רוחב של המסך או הצג.
תיבות דו-שיח שאינן מודליות
גם HTMLDialogElement.show() פותח תיבת דו-שיח, אבל בלי להוסיף רקע ובלי לגרום לפעילות לא יציבה.
מקש Escape לא סוגר תיבות דו-שיח שאינן מודליות. לכן חשוב יותר להקפיד לכלול שיטה לסגירת תיבת הדו-שיח שאינה חלון מודאלי. כך, אם המיקום קרוב יותר מחוץ לתיבת הדו-שיח, חשוב להבין שהמיקוד עובר לרכיב שפתח את תיבת הדו-שיח, ויכול להיות שחוויית המשתמש לא תהיה הטובה ביותר.
לחצן לסגירת תיבת הדו-שיח לא נדרש באופן רשמי על ידי המפרט, אבל אפשר לראות אותו כנדרש. מקש 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.