用 <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