對話框是新增到應用程式中的常見元件,無論是在網頁應用程式中還是在本機應用程式中。傳統上,沒有一種在網路上實現這些的標準方法,導致許多臨時實作在不同的網路應用程式中表現不一致。通常,由於實現的複雜性,對話方塊中會缺少常見的預期功能。
但是,網頁瀏覽器現在提供標準對話框元素。
原生對話框元素簡化了對話框、模式和其他類型非模式對話框的實作。它透過實現已內建在瀏覽器中的對話框所需的許多功能來實現此目的。
這很有幫助,因為它透過確保滿足用戶對互動的期望來減輕開發人員在使應用程式可訪問時的負擔,並且它還可以總體上簡化對話框的實現。
使用新的
<dialog> <p>However, adding the dialog alone won’t do anything to the page. It will show up only once you call the .showModal() method against it.<br> </p> <pre class="brush:php;toolbar:false">document.getElementById('example-dialog').showModal();
然後,如果你想關閉它,你可以呼叫對話框上的 .close() 方法,或按轉義鍵關閉它,就像大多數其他模式一樣。另外,請注意背景如何使頁面的其餘部分變暗並阻止您與其互動。整齊!
在讓所有使用者都可以存取您的 Web 應用程式時,正確處理焦點非常重要。通常,在顯示它們時,您必須將目前焦點移至活動對話框,但對話方塊元素已為您完成。
預設情況下,焦點將設定在對話方塊中的第一個可聚焦元素上。您可以選擇透過在希望焦點開始的元素上設定 autofocus 屬性來變更哪個元素首先接收焦點,如前面的範例所示,該屬性被加入到關閉
使用 .showModal() 方法開啟對話方塊也會隱式地將對話方塊 ARIA 角色加入對話方塊元素。這有助於螢幕閱讀器了解模式已經出現以及螢幕,以便它可以採取相應的行動。
表單也可以加入對話框中,甚至還有一個特殊的方法值。如果新增