用 <dialog> 輕鬆實作 Modal 對話框

沒查不知道現在做 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

Facebook Threads X

對抗久坐職業傷害

研究指出每天增加 2 小時坐著的時間,會增加大腸癌、心臟疾病、肺癌的風險,也造成肩頸、腰背疼痛等常見問題。

然而對抗這些問題,卻只需要工作時定期休息跟伸展身體即可!

你想輕鬆改變現狀嗎?試試看我們的 PomodoRoll 番茄鐘吧! PomodoRoll 番茄鐘會根據你所設定的專注時間,定期建議你 1 項辦公族適用的伸展運動,幫助你打敗久坐所帶來的傷害!

贊助我們的創作

看完這篇文章了嗎? 休息一下,喝杯咖啡吧!

如果你覺得 MyApollo 有讓你獲得實用的資訊,希望能看到更多的技術分享,邀請你贊助我們一杯咖啡,讓我們有更多的動力與精力繼續提供高品質的文章,感謝你的支持!