مرجع عناصر HTML : عنصر <dialog>
عنصر HTML <dialog> یک کادر محاورهای مودال یا غیر مودال یا سایر اجزای تعاملی مانند هشدار، بازرس یا زیرپنجره قابل حذف را نشان میدهد.
این عنصر شامل ویژگیهای سراسری است.
ویژگی tabindex نباید روی عنصر استفاده شود. به یادداشتهای اضافی مراجعه کنید.
closedby
انواع اقدامات کاربر را که میتوانند برای بستن عنصر استفاده شوند، مشخص میکند. این ویژگی سه روش را که ممکن است یک کادر محاورهای بسته شود، متمایز میکند:
یک اقدام کاربر با قابلیت رد کردن سبک، که در آن با کلیک یا ضربه زدن کاربر در خارج از آن بسته میشود. این معادل رفتار "رد کردن سبک" در حالت "خودکار" است.
یک اقدام کاربر مختص پلتفرم، مانند فشار دادن کلید Esc در پلتفرمهای دسکتاپ، یا یک حرکت "بازگشت" یا "رد کردن" در پلتفرمهای موبایل.
یک مکانیسم مشخص شده توسط توسعهدهنده مانند یک با یک کنترلکننده کلیک که یا یک ارسال را فراخوانی میکند.
مقادیر ممکن عبارتند از:
- any
گفتگو را میتوان با استفاده از هر یک از سه روش رد کرد.
- closerequest
گفتگو را میتوان با یک اقدام کاربر مختص پلتفرم یا یک مکانیسم مشخص شده توسط توسعهدهنده رد کرد.
- none
گفتگو را فقط میتوان با یک مکانیسم مشخص شده توسط توسعهدهنده رد کرد.
اگر عنصر مقدار closedby معتبری مشخص نکرده باشد، آنگاه
- اگر با استفاده از باز شده باشد، طوری رفتار میکند که انگار مقدار "closerequest" است.
- در غیر این صورت، طوری رفتار میکند که انگار مقدار "none" است.
open
نشان میدهد که کادر گفتگو فعال است و برای تعامل در دسترس است. اگر ویژگی باز کردن تنظیم نشده باشد، کادر گفتگو برای کاربر قابل مشاهده نخواهد بود. توصیه میشود از متد یا برای رندر کردن گفتگوها، به جای ویژگی باز کردن، استفاده کنید. اگر یک با استفاده از ویژگی باز کردن باز شود، غیر مدال است.
در حالی که میتوانید با فعال کردن ویژگی باز کردن، بین حالتهای باز و بسته کادرهای گفتگوی غیر مدال جابجا شوید، این رویکرد توصیه نمیشود.
عنصر در HTML برای ایجاد کادرهای محاورهای مودال و غیرمودال استفاده میشود. کادرهای محاورهای مودال تعامل با سایر عناصر رابط کاربری را مسدود میکنند و بقیه صفحه را بیاثر میکنند، در حالی که کادرهای محاورهای غیرمودال امکان تعامل با بقیه صفحه را فراهم میکنند.
کنترل دیالوگها با استفاده از جاوا اسکریپت
جاوا اسکریپت میتواند برای نمایش و بستن عنصر استفاده شود. میتوانید از متد برای نمایش یک دیالوگ مدال و از متد برای نمایش یک دیالوگ غیر مدال استفاده کنید. کادر محاورهای را میتوان با استفاده از متد یا با استفاده از متد dialog هنگام ارسال یک که درون عنصر تو در تو قرار دارد، بست. دیالوگهای مدال را میتوان با فشار دادن کلید Esc نیز بست.
دیالوگهای مودال با استفاده از دستورات invoker
دیالوگهای مودال را میتوان با استفاده از ویژگیهای HTML مربوط به API دستورات Invoker، commandfor و command، که میتوانند روی عناصر تنظیم شوند، به صورت اعلانی باز و بسته کرد.
ویژگی command دستور خاصی را که هنگام کلیک روی عنصر ارسال میشود، تعیین میکند، در حالی که commandfor شناسه دیالوگ هدف را تعیین میکند. دستوراتی که میتوانند برای دیالوگها ارسال شوند عبارتند از "show-modal"، "close" و "request-close".
کد HTML زیر نحوه اعمال این ویژگیها را به یک عنصر نشان میدهد تا بتوان آن را فشار داد تا یک مودال با شناسه "my-dialog" باز شود.
دیالوگهای غیرمودال با استفاده از دستورات popover
دیالوگهای غیرمودال را میتوان با استفاده از ویژگیهای HTML مربوط به Popover API به نام popovertarget و popovertargetaction که میتوانند روی عناصر و تعریف شوند، به صورت اعلانی باز، بسته و تغییر وضعیت داد.
باید با اضافه کردن ویژگی popover به یک popover تبدیل شود. سپس میتوانید از popovertarget روی یک دکمه/ورودی برای نشان دادن پاپاور هدف و از popovertargetaction برای مشخص کردن عملی که هنگام کلیک روی دکمه روی پاپاور رخ میدهد، استفاده کنید. توجه داشته باشید که از آنجایی که دیالوگ یک پاپاور است، غیرمودال خواهد بود، بنابراین میتوانید با کلیک کردن در خارج از دیالوگ، آن را ببندید.
HTML زیر نحوه اعمال این ویژگیها را روی یک عنصر نشان میدهد تا بتوان آن را برای نمایش و پنهان کردن یک مودال با شناسه "my-dialog" فشار داد.
API مربوط به Popover همچنین ویژگیهایی را ارائه میدهد که میتوانند برای دریافت و تنظیم حالت در جاوا اسکریپت استفاده شوند.
ارائه یک مکانیزم بسته شدن برای هر عنصر و اطمینان از اینکه این مکانیزم در دستگاههایی که ممکن است صفحه کلید فیزیکی نداشته باشند نیز کار میکند، بسیار مهم است.
راههای متعددی برای بستن یک کادر محاورهای وجود دارد:
ارسال فرم در عنصر با تنظیم روی عنصر (به مثال استفاده از ویژگی open dialog مراجعه کنید).
کلیک کردن در خارج از ناحیه کادر محاورهای هنگام فعال بودن "light dismiss" (به مثال ویژگیهای HTML API Popover مراجعه کنید).
فشردن کلید Esc، در کادرهای محاورهای که فعال است (به مثال ویژگیهای HTML API Popover مراجعه کنید).
فراخوانی متد (به مثال modal مراجعه کنید).
یک را میتوان با استفاده از نام عنصر آن (مانند هر عنصر دیگری) انتخاب کرد، و همچنین میتوانید با استفاده از شبه کلاسهایی مانند و ، حالت آن را تطبیق دهید.
از شبه عنصر CSS میتوان برای استایلدهی به پسزمینه یک پنجره محاورهای استفاده کرد که هنگام نمایش پنجره محاورهای با استفاده از متد در پشت عنصر نمایش داده میشود. این شبه عنصر میتواند، به عنوان مثال، برای محو کردن، تیره کردن یا مبهم کردن محتوای بیاثر پشت پنجره محاورهای استفاده شود.
عناصر در HTML میتوانند برای بستن کادر محاورهای استفاده شوند، اگر ویژگی را داشته باشند یا دکمهای که برای ارسال فرم استفاده میشود، را تنظیم کرده باشد. وقتی یک درون یک از طریق روش dialog ارسال میشود، کادر محاورهای بسته میشود، وضعیت کنترلهای فرم ذخیره میشود اما ارسال نمیشود و ویژگی returnValue روی مقدار دکمهای که فعال شده است تنظیم میشود.
ویژگی autofocus باید به عنصری اضافه شود که انتظار میرود کاربر بلافاصله پس از باز کردن یک کادر محاورهای با آن تعامل داشته باشد. اگر هیچ عنصر دیگری تعامل فوریتری ندارد، توصیه میشود autofocus را به دکمه بستن درون کادر محاورهای یا خود کادر محاورهای اضافه کنید، اگر انتظار میرود کاربر برای بستن آن کلیک کند/فعال شود.
ویژگی tabindex را به عنصر اضافه نکنید زیرا تعاملی نیست و فوکوس دریافت نمیکند. محتویات کادر محاورهای، از جمله دکمه بستن موجود در کادر محاورهای، میتوانند فوکوس دریافت کنند و تعاملی باشند.
هنگام پیادهسازی یک دیالوگ، در نظر گرفتن مناسبترین مکان برای تنظیم فوکوس کاربر مهم است. هنگام استفاده از برای باز کردن یک ، فوکوس روی اولین عنصر تودرتو با قابلیت فوکوس تنظیم میشود. مشخص کردن صریح محل فوکوس اولیه با استفاده از ویژگی فوکوس خودکار، به اطمینان از تنظیم فوکوس اولیه روی عنصری که بهترین محل فوکوس اولیه برای هر دیالوگ خاص در نظر گرفته میشود، کمک میکند. در صورت شک، از آنجایی که ممکن است همیشه مشخص نباشد که فوکوس اولیه را میتوان در یک دیالوگ کجا تنظیم کرد، به ویژه برای مواردی که محتوای یک دیالوگ هنگام فراخوانی به صورت پویا رندر میشود، خود عنصر ممکن است بهترین محل فوکوس اولیه را ارائه دهد.
اطمینان حاصل کنید که مکانیزمی برای امکان بستن دیالوگ توسط کاربران فراهم شده است. قویترین راه برای اطمینان از اینکه همه کاربران میتوانند دیالوگ را ببندند، قرار دادن یک دکمه صریح برای انجام این کار، مانند دکمه تأیید، لغو یا بستن است.
به طور پیشفرض، دیالوگی که توسط متد فراخوانی میشود، میتواند با فشار دادن کلید Esc رد شود. یک پنجره محاورهای غیرمودال به طور پیشفرض با کلید Esc بسته نمیشود و بسته به اینکه پنجره محاورهای غیرمودال چه چیزی را نشان میدهد، ممکن است برای این رفتار مطلوب نباشد. کاربران صفحه کلید انتظار دارند که کلید Esc پنجرههای محاورهای را ببندد؛ اطمینان حاصل کنید که این رفتار پیادهسازی و حفظ شده است. اگر چندین پنجره محاورهای مودال باز باشند، فشردن کلید Esc باید فقط آخرین پنجره محاورهای نمایش داده شده را ببندد. هنگام استفاده از ، این رفتار توسط مرورگر ارائه میشود.
در حالی که میتوان پنجرههای محاورهای را با استفاده از عناصر دیگر ایجاد کرد، عنصر بومی ویژگیهای قابلیت استفاده و دسترسی را ارائه میدهد که در صورت استفاده از عناصر دیگر برای هدف مشابه، باید تکرار شوند. اگر در حال ایجاد یک پیادهسازی پنجره محاورهای سفارشی هستید، اطمینان حاصل کنید که تمام رفتارهای پیشفرض مورد انتظار پشتیبانی میشوند و توصیههای برچسبگذاری مناسب رعایت میشوند.
عنصر توسط مرورگرها به روشی مشابه پنجرههای محاورهای سفارشی که از ویژگی ARIA استفاده میکنند، نمایش داده میشود. عناصر ویژگیهای HTML رابط برنامهنویسی کاربردی فرمان Invoker
این مثال نشان میدهد که چگونه میتوانید با استفاده از ویژگیهای commandfor و command HTML از رابط برنامهنویسی کاربردی Invoker Commands، یک پنجره محاورهای را باز و بسته کنید.
ابتدا، یک عنصر تعریف میکنیم و ویژگی command را روی "show-modal" و ویژگی commandfor را روی شناسه پنجره محاورهای که قرار است باز شود (my-dialog) تنظیم میکنیم. سپس یک عنصر تعریف میکنیم که حاوی "Close" است. این دکمه دستور "close" را به شناسه (همان) پنجره محاورهای ارسال میکند.
با فشردن دکمهی «باز کردن پنجرهی گفتگو» (Open dialog) آن را باز کنید. میتوانید با انتخاب دکمهی «بستن» (Close) یا فشردن کلید Esc، پنجرهی گفتگو را ببندید.
ویژگیهای HTML API مربوط به Popover
این مثال نشان میدهد که چگونه میتوانید با استفاده از ویژگیهای HTML popover، popovertarget و popovertargetaction از API Popover، یک کادر محاورهای غیر مدال را باز و بسته کنید.
با اضافه کردن ویژگی popover به یک کادر محاورهای تبدیل میشود. از آنجایی که ما مقداری برای این ویژگی مشخص نکردهایم، از مقدار پیشفرض "auto" استفاده میشود. این ویژگی رفتار "light dismiss" را فعال میکند و به کادر محاورهای اجازه میدهد با کلیک کردن در خارج از کادر محاورهای یا با فشار دادن Esc بسته شود. در عوض، میتوانستیم را برای غیرفعال کردن رفتار "light dismiss" تنظیم کنیم، که در این صورت کادر محاورهای باید با استفاده از دکمه "Close" بسته شود.
توجه داشته باشید که ما ویژگی popovertargetaction را برای که کادر محاورهای را باز میکند، مشخص نکردهایم. در این مورد نیازی به آن نیست، زیرا مقدار پیشفرض آن toggle است که با کلیک بر روی دکمه، کادر محاورهای را بین حالتهای باز و بسته تغییر میدهد.
با فشردن دکمهی «باز کردن پنجرهی گفتگو» پنجره را باز کنید. میتوانید با انتخاب دکمهی «بستن» یا فشردن کلید Esc پنجره را ببندید. همچنین میتوانید با انتخاب خارج از پنجره، آن را ببندید، زیرا حالت غیر مدال دارد.
استفاده از ویژگی open در dialog
این مثال نشان میدهد که چگونه میتوانید ویژگی باز کردن (open) از نوع بولی را روی یک عنصر تنظیم کنید تا یک کادر محاورهای غیرمودال فقط HTML ایجاد شود که هنگام بارگذاری صفحه از قبل باز باشد.
با کلیک بر روی دکمه "OK" میتوان کادر محاورهای را بست زیرا ویژگی متد در عنصر روی "dialog" تنظیم شده است. در این حالت، برای بستن فرم نیازی به جاوا اسکریپت نیست.
این کادر محاورهای به دلیل وجود ویژگی open، در ابتدا باز و غیرمُدال است. پس از کلیک روی «تأیید»، کادر محاورهای بسته میشود و کادر نتیجه خالی میماند.
وقتی پنجره گفتگو بسته میشود، هیچ روشی برای بازگشایی مجدد آن ارائه نشده است. روش ترجیحی برای نمایش گفتگوهای غیر modal، استفاده از متد
است. میتوان با اضافه کردن یا حذف ویژگی boolean open، نمایش گفتگو را تغییر داد، اما این روش توصیه نمیشود.
این مثال یک پنجره محاورهای با پسزمینه گرادیان را نشان میدهد. متد با فعال شدن دکمه "نمایش پنجره محاورهای" پنجره محاورهای را باز میکند. پنجره محاورهای را میتوان با فشار دادن کلید Esc یا از طریق متد با فعال شدن دکمه "بستن" درون پنجره محاورهای بست.
هنگامی که یک پنجره محاورهای باز میشود، مرورگر به طور پیشفرض به اولین عنصری که میتواند درون پنجره محاورهای فوکوس شود، فوکوس میدهد. در این مثال، ویژگی فوکوس خودکار به دکمه "بستن" اعمال میشود و هنگام باز شدن پنجره محاورهای، به آن فوکوس میدهد، زیرا این عنصری است که انتظار داریم کاربر بلافاصله پس از باز شدن پنجره محاورهای با آن تعامل داشته باشد.
میتوانیم با استفاده از شبه عنصر ، پسزمینهی کادر محاورهای را استایلدهی کنیم.
این کادر محاورهای با استفاده از متد به صورت مدالی باز میشود و با استفاده از متدهای یا بسته میشود.
وقتی پنجره محاورهای نمایش داده میشود، بالای هر پنجره محاورهای دیگری که ممکن است وجود داشته باشد، ظاهر میشود. هر چیزی خارج از پنجره محاورهای بیاثر است و تعاملات خارج از پنجره محاورهای مسدود میشوند. توجه داشته باشید که وقتی پنجره محاورهای باز است، به استثنای خود پنجره محاورهای، تعامل با سند امکانپذیر نیست؛ دکمه «نمایش پنجره محاورهای» عمدتاً توسط پسزمینه تقریباً مات پنجره محاورهای مبهم و بیاثر است.
مدیریت مقدار برگشتی از کادر dialog
این مثال مقدار بازگشتی عنصر و نحوه بستن یک پنجره محاورهای را با استفاده از یک فرم نشان میدهد. به طور پیشفرض، مقدار بازگشتی رشته خالی یا مقدار دکمهای است که فرم را در عنصر ، در صورت وجود، ارسال میکند.
این مثال هنگامی که دکمه "نمایش پنجره محاورهای" فعال میشود، یک پنجره محاورهای را باز میکند. پنجره محاورهای شامل یک فرم با یک عنصر و دو عنصر است که به طور پیشفرض روی تنظیم شدهاند. یک شنونده رویداد، مقدار دکمه "Confirm" را هنگامی که گزینه select تغییر میکند، بهروزرسانی میکند. اگر دکمه "Confirm" برای بستن پنجره محاورهای فعال شود، مقدار فعلی دکمه، مقدار بازگشتی است. اگر پنجره محاورهای با فشار دادن دکمه "Cancel" بسته شود، مقدار returnValue برابر با cancel است.
هنگامی که پنجره محاورهای بسته میشود، مقدار بازگشتی در زیر دکمه "نمایش پنجره محاورهای" نمایش داده میشود. اگر کادر محاورهای با فشردن کلید Esc بسته شود، returnValue بهروزرسانی نمیشود و رویداد close رخ نمیدهد، بنابراین متن موجود در بهروزرسانی نمیشود.
این کادر محاورهای با استفاده از یک شنونده رویداد روی دکمه "نمایش کادر محاورهای" باز میشود که وقتی روی دکمه کلیک میشود، را فراخوانی میکند.
با کلیک روی دکمه "لغو" کادر محاورهای بسته میشود، زیرا شامل ویژگی است. وقتی متد یک فرم dialog باشد، وضعیت فرم ذخیره میشود اما ارسال نمیشود و کادر محاورهای بسته میشود (این ویژگی، متد GET پیشفرض را لغو میکند). بدون یک action، ارسال فرم از طریق متد GET پیشفرض باعث بارگذاری مجدد صفحه میشود. ما از جاوا اسکریپت برای جلوگیری از ارسال و بستن کادر محاورهای به ترتیب با متدهای و استفاده میکنیم.
بستن یک dialog با ورودی فرم الزامی
وقتی فرمی درون یک کادر محاورهای ورودی الزامی داشته باشد، عامل کاربر فقط زمانی به شما اجازه میدهد کادر محاورهای را ببندید که مقداری برای ورودی الزامی ارائه دهید. برای بستن چنین کادر محاورهای، یا از ویژگی formnovalidate روی دکمهی بستن استفاده کنید یا وقتی دکمهی بستن کلیک میشود، متد را روی شیء کادر محاورهای فراخوانی کنید.
از خروجی، میبینیم که بستن پنجره محاورهای با استفاده از دکمه بستن Normal غیرممکن است. اما اگر اعتبارسنجی فرم را با استفاده از ویژگی formnovalidate روی دکمه لغو دور بزنیم، میتوان پنجره محاورهای را بست. از نظر برنامهنویسی، نیز چنین پنجره محاورهای را میبندد.
مقایسه رفتارهای مختلف closedby
این مثال تفاوت رفتار بین مقادیر مختلف ویژگی closedby را نشان میدهد.
ما سه عنصر و سه عنصر ارائه میدهیم. هر دکمه طوری برنامهریزی میشود که یک کادر محاورهای متفاوت را باز کند که رفتار یکی از سه مقدار ویژگی closedby - none، closerequest و any را نشان میدهد. توجه داشته باشید که هر عنصر حاوی یک عنصر است که برای بستن آن استفاده خواهد شد.
در اینجا متغیرهای مختلفی را برای ارجاع به عناصر اصلی کنترل، عناصر و عناصر "بستن" درون دیالوگها تعیین میکنیم. ابتدا با استفاده از addEventListener یک شنونده رویداد کلیک به هر دکمه کنترل اختصاص میدهیم، که تابع مدیریت رویداد آن عنصر مرتبط را از طریق باز میکند. سپس روی ارجاعات "بستن" حلقه میزنیم و به هر یک از آنها یک تابع مدیریت رویداد کلیک اختصاص میدهیم که عنصر آن را از طریق میبندد.
برای باز کردن یک پنجره گفتگو، روی هر دکمه کلیک کنید. پنجره اول فقط با کلیک روی دکمه "بستن" بسته میشود. پنجره دوم را میتوان از طریق یک اقدام کاربر مختص دستگاه مانند فشار دادن کلید Esc نیز بست. پنجره سوم رفتار "رد کردن با نور" کامل دارد، بنابراین میتوان آن را با کلیک یا ضربه زدن در خارج از پنجره گفتگو نیز بست.
ها به صورت در حالت پنهان و در حالت نمایش تنظیم میشوند، و همچنین از لایه بالایی و درخت دسترسی حذف/اضافه میشوند. بنابراین، برای اینکه عناصر متحرک شوند، ویژگی display باید قابل انیمیشن باشد. مرورگرهای پشتیبانیکننده، نمایش را با تغییر در نوع انیمیشن گسسته، متحرک میکنند. به طور خاص، مرورگر بین none و مقدار دیگری از display جابجا میشود تا محتوای متحرک در کل مدت زمان انیمیشن نمایش داده شود.
به عنوان مثال:
- هنگام متحرکسازی display از none به block (یا مقدار قابل مشاهده دیگری برای display)، مقدار در 0٪ مدت زمان انیمیشن به block تغییر میکند، بنابراین در کل مدت زمان انیمیشن قابل مشاهده است.
- هنگام متحرکسازی display از block (یا مقدار قابل مشاهده دیگری برای display) به none، مقدار در 100٪ مدت زمان انیمیشن به none تغییر میکند، بنابراین در کل مدت زمان انیمیشن قابل مشاهده است.
هنگام متحرکسازی با استفاده از transitionهای CSS، باید برای فعال کردن رفتار فوق تنظیم شود. این رفتار به طور پیشفرض هنگام متحرکسازی با انیمیشنهای CSS در دسترس است. مرحله معادل لازم نیست.
transition برای عنصر dialog
هنگام متحرکسازی ها با انتقالهای CSS، ویژگیهای زیر مورد نیاز است:
مجموعهای از مقادیر اولیه را برای ویژگیهای تنظیمشده روی که میخواهید هر بار که باز میشود از آن انتقال انجام شود، فراهم میکند. این برای جلوگیری از رفتار غیرمنتظره لازم است. بهطور پیشفرض، انتقالهای CSS فقط زمانی رخ میدهند که یک ویژگی در یک عنصر قابل مشاهده از یک مقدار به مقدار دیگر تغییر کند. آنها در اولین بهروزرسانیهای سبک عناصر یا زمانی که نوع نمایش از هیچ به نوع دیگری تغییر میکند، فعال نمیشوند.
ویژگی display
display را به لیست انتقالها اضافه کنید تا در طول انتقال به عنوان بلوک (یا مقدار نمایش قابل مشاهده دیگری که در حالت باز بودن کادر محاورهای تنظیم شده است) باقی بماند و اطمینان حاصل شود که سایر انتقالها قابل مشاهده هستند.
ویژگی overlay
overlay را در لیست انتقالها قرار دهید تا اطمینان حاصل شود که حذف از لایه بالایی تا زمان تکمیل انتقال به تعویق میافتد و دوباره اطمینان حاصل میشود که انتقال قابل مشاهده است.
ویژگی transition-behavior
تنظیم روی انتقالهای display و overlay (یا روی خلاصهنویسی انتقال) برای فعال کردن انتقالهای گسسته روی این دو ویژگی که به طور پیشفرض قابل انیمیشن نیستند.
در اینجا یک مثال سریع برای نشان دادن چگونگی این امر آورده شده است.
کد HTML شامل یک عنصر به علاوه یک دکمه برای نمایش کادر محاورهای است. علاوه بر این، عنصر شامل دکمه دیگری برای بستن خود نیز میباشد.
در CSS، ما یک بلوک را اضافه میکنیم که سبکهای شروع گذار را برای ویژگیهای opacity و transform، سبکهای پایان گذار را در حالت و سبکهای پیشفرض را در حالت پیشفرض dialog برای بازگشت به حالت اولیه پس از نمایش تعریف میکند. توجه داشته باشید که چگونه لیست گذار نه تنها شامل این ویژگیها، بلکه ویژگیهای display و overlay را نیز شامل میشود که هر کدام دارای تنظیم allow-discrete هستند.
همچنین ما یک مقدار سبک شروع برای ویژگی background-color در که هنگام باز شدن در پشت آن ظاهر میشود، تنظیم میکنیم تا یک انیمیشن تیره شدن زیبا ارائه دهیم. انتخابگر فقط پسزمینههای عناصر را هنگام باز بودن dialog انتخاب میکند.
در مرورگرهایی که از شبه کلاس پشتیبانی نمیکنند، میتوانید از انتخابگر ویژگی برای استایلدهی به عنصر در حالت باز استفاده کنید.
جاوااسکریپت به دکمههای نمایش و بستن، کنترلکنندههای رویداد اضافه میکند و باعث میشود هنگام کلیک روی ، آنها نمایش داده شده و بسته شوند:
از آنجا که ها هر بار که نمایش داده میشوند از حالت به تغییر میکنند، هر بار که تغییر ورودی رخ میدهد، از حالت خود به حالت خود منتقل میشود. وقتی بسته میشود، از حالت خود به حالت پیشفرض دیالوگ منتقل میشود.
در چنین مواردی، ممکن است تغییر سبک در هنگام ورود و خروج متفاوت باشد. برای اثبات این موضوع، به مثال ما در مورد زمان استفاده از سبکهای شروع مراجعه کنید.
انیمیشنهای keyframe دیالوگ
هنگام متحرکسازی یک با انیمیشنهای فریم کلیدی CSS، تفاوتهایی با transitionها وجود دارد که باید به آنها توجه کرد:
- شما یک ارائه نمیدهید.
- شما مقدار display را در یک فریم کلیدی قرار میدهید؛ این مقدار display برای کل انیمیشن یا تا زمانی که مقدار display دیگری غیر از none مواجه شود، خواهد بود.
- شما نیازی به فعال کردن صریح انیمیشنهای گسسته ندارید؛ معادلی برای وجود ندارد.
- همچنین نیازی به تنظیم overlay داخل keyframeها ندارید؛ انیمیشن display، انیمیشن را از حالت نمایش داده شده تا حالت پنهان مدیریت میکند.
بیایید به یک مثال نگاهی بیندازیم تا ببینید این چگونه به نظر میرسد.
اول، کد HTML شامل یک عنصر به علاوه یک دکمه برای نمایش کادر محاورهای است. علاوه بر این، عنصر شامل یک دکمه دیگر برای بستن خود است.
CSS فریمهای کلیدی را برای متحرکسازی بین حالتهای بسته و نمایش ، به علاوه انیمیشن محو شدن برای پسزمینه تعریف میکند. انیمیشنهای شامل نمایش متحرک هستند تا مطمئن شوند که جلوههای انیمیشن قابل مشاهده واقعی برای کل مدت زمان قابل مشاهده باقی میمانند. توجه داشته باشید که متحرکسازی پسزمینه محو شدن امکانپذیر نبود - پسزمینه بلافاصله پس از بسته شدن از DOM حذف میشود، بنابراین چیزی برای متحرکسازی وجود ندارد.
در نهایت، جاوا اسکریپت، کنترلکنندههای رویداد را به دکمهها اضافه میکند تا نمایش و بستن را فعال کند:
| مشخصه | توضیحات |
|---|
| دسته بندی محتوا | Flow content, sectioning root |
| محتوای مجاز | Flow content |
| حذف برچسب | هیچکدام، هر دو تگ شروع و پایان اجباری هستند. |
| والدین مجاز | هر عنصری که محتوای جریان را میپذیرد |
| نقش ضمنی ARIA | dialog |
| نقشهای مجاز ARIA | alertdialog |
| رابط DOM | HTMLDialogElement |
که توسط متد
فراخوانی میشوند، به طور ضمنی دارای
هستند، در حالی که عناصر
که توسط متد
فراخوانی میشوند یا با استفاده از ویژگی open یا با تغییر نمایش پیشفرض یک
نمایش داده میشوند، به صورت
نمایش داده میشوند. هنگام پیادهسازی دیالوگهای modal، هر چیزی غیر از
و محتویات آن باید با استفاده از ویژگی inert بیاثر (inert) رندر شود. هنگام استفاده از
به همراه متد
، این رفتار توسط مرورگر ارائه میشود.
