使用 <dialog> 和 Web 元件構建畫布外選單

Devinlpass · 發表於 2024-3-7 13:39:00

目錄畫布外選單的可訪問性注意事項 <dialog>元素的 HTML <dialog>元素的 JavaScript 新增 CSS 將對話方塊定位在畫布外當對話框出現在螢幕上時的 CSS 動畫畫布外對話方塊建立選單作為 Web 元件瞭解 LogRocket 的 AI 驅動的錯誤跟蹤如何工作無需註冊一探究竟畫布外選單是網頁設計中的常見模式。您經常在移動網站上看到它，您單擊漢堡選單按鈕，選單就會從螢幕一側滑入，通常會覆蓋其後面的內容。使用對話方塊元素和 Web 元件構建畫布外選單在概述畫布外選單的基礎上，本文將探討使用 Web 元件和元素建立可訪問的畫布外選單的步驟<dialog>

。我們將探討如何將此選單整合到您的網站中，確保它不僅增強使用者體驗，而且遵守可訪問性標準。畫布外選單的加拿大電話號碼列表可訪問性注意事項雖然從表面上看，建立畫布外選單是一項相當容易完成的任務，但當您考慮可訪問性時，它可能會變得棘手。您必須考慮以下事項：一個 ARIA 屬性來宣告該專案是expanded 畫布外元素內的焦點陷阱，這樣使用者就不會意外地在外部點選到他們看不到的連結用於關閉畫布外元素的按鈕（然後將所有屬性重置回預設值）焦點狀態返回到觸發畫布外元素開啟的專案當談到可訪問性時，第一條規則是使用瀏覽器的本機 API。在本例中，我們將使用<dialog>element。這將使我們能夠在單擊按鈕時顯示畫布外元素的內容，免費提供焦點陷阱，並宣佈需要向輔助技術宣佈的任何內容。這也意味著我們不必自己維護或更新任何這些功能。下一節將簡要介紹如何建立對話方塊。

<dialog>元素的 HTML 對於 HTML，很簡單，只需<dialog>向頁面新增一個元素，新增一個可用於開啟對話方塊的按鈕，最後在框中新增一個可用於關閉對話方塊的按鈕： <html> <頭> < /頭> <正文> 您所有的 HTML 都在這裡 < button class = “ open - dialog ” >開啟對話方塊</dialog> <dialog> < button class = “ close - dialog ” >關閉對話方塊</dialog> </dialog> </body> </html> 注意，預設情況下，ESC如果沒有關閉按鈕，您可以按鍵關閉對話方塊。 <dialog>元素的 JavaScript JavaScript 也非常簡單。我們為對話方塊、開啟按鈕和關閉按鈕建立變數。然後，我們向每個按鈕新增一個事件偵聽器以呼叫對話方塊上的或方法：showModal()close() 常量對話方塊=文件. 查詢選擇器( '對話方塊' ); const按鈕開啟=文件. querySelector ( ' . open-dialog' ) constbuttonClose = document . querySelector ( '.close-dialog' ) 按鈕開啟。

		自動登入	找回密碼
密碼			立即註冊