用 <dialog> 輕鬆實作 Modal 對話框
覺得我們的內容實用嗎? MyApollo 電子報讀者募集中!歡迎訂閱電子報!
沒查不知道現在做 Modal 這麼簡單⋯⋯。
原來所有的瀏覽器都早已支援 <dialog>
標籤,可以不用像古早時代實作 modal 要寫一大堆 CSS, Javascript 就為了讓對話框隱藏、彈出來甚至消失,現在只要使用 <dialog>
標籤就能夠預設隱藏一個對話框,接著可以用 Javascript 觸發顯示或關閉該對話框,或者使用 open 屬性控制開啟或關閉 (e.g. <dialog open>
) ,相較以前省事許多!
如果你想不使用任何前端框架的情況下實作 modal, 請記得你還有 <dialog>
可以幫忙!
dialog 標籤文件: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog