點擊 modal 外的區域，讓 modal 隱藏起來

[ayugioh2003]

網址

• https://www.facebook.com/groups/1439747729634154/?multi_permalinks=3238363639772545&hoisted_section_header_type=recently_seen

記錄原因

之前在客製化 modal 時，常常不曉得怎麼點擊外層時，讓 modal invisible

觀念

目前留言有三種方案

一、mousedown 事件監聽器

幫你的 datepicker 建一個 ref，然後用 document.addEventListener("mousedown",handleClick); 監聽點擊事件，然後在 handleClick 裡面判斷 event.target 有沒有在 ref 裡面，如果沒有的話就關閉 datepicker

• https://stackoverflow.com/questions/32553158/detect-click-outside-react-component

二、外層作一層全螢幕遮罩

我想到的是，點擊把datepicker包在一個div，點擊事件新增一個div為遮罩層，遮罩層設置點擊事件會關閉datepicker，遮罩層做灰暗色背景。 其實就像是彈出視窗這樣？

三、CSS

• https://play.tailwindcss.com/mQY4YPyXGN
• Plugins - Tailwind CSS

學習點

相關資料