這次要來實作一個登入的彈窗效果，以前做彈窗大多是使用 Bootstrap 的彈窗元件或是 lightbox 的套件。這次就用 TailwindCSS 直接來刻一個！
建立彈窗背景
因要將彈窗固定在畫面上，所以使用絕對定位的方式來寫，並且先把遮罩背景設定成深灰色。
1
2
3
| <body class="bg-[#eee] relative">
<div class="absolute top-0 left-0 right-0 w-full h-full bg-gray-900"></div>
</body>
|
畫面就會是一片黑…就是代表你成功了。
在顏色後面加一個 bg-color/透明度數值，那設定透明度使用 70% 效果。
1
| <div class="absolute top-0 left-0 right-0 w-full h-full bg-gray-900/70"></div>
|
登入介面
在寫好的彈窗範圍內先建立一個簡單的登入表單內容，按鈕就沿用之前開發好的元件拿來使用。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <div class="w-[90%] p-4 mt-20 bg-white rounded-md shadow-md">
<h2 class="text-center text-purple-500 font-bold mb-10 text-3xl">
登入您的帳號
</h2>
<p class="mb-2">電子信箱</p>
<input
type="email"
class="border-2 border-gray-400 focus:ring-2 w-full p-2 rounded-md"
/>
<p class="mt-4 mb-2">密碼</p>
<input
type="password"
class="border-2 border-gray-400 focus:ring-2 w-full p-2 rounded-md"
/>
<a href="javascript:void(0)" class="block mt-2 text-blue-400">忘記密碼</a>
<button
class="
w-full bg-purple-500 hover:bg-purple-600
active:bg-purple-900 active:ring-2
duration-200 py-3 text-lg text-white
tracking-wide rounded-lg mt-4
"
>
登入
</button>
</div>
|
隱藏登入介面與可點到登入按鈕
在彈窗的部份加上透明度為 0 的樣式，但這樣會有一個問題，因為目前是用絕對定位的方式蓋在主要的畫面上，雖然登入介面看不到了，但實質上卻還是有一個 div 區塊元素，所以無法點擊到登入按鈕。
這時可以用 pointer-events-none 忽略 pointer-events 事件，並且可以點擊到下方元素。
彈窗
1
2
3
4
5
| <div
class="absolute top-0 left-0 right-0 w-full h-full bg-gray-900/70 flex justify-center items-start opacity-0 pointer-events-none"
>
...
</div>
|
加上 JS 做出彈窗效果
在原本登入、彈窗與關閉的地方，都個別加上 id，login, modal,close 等名稱，然後再透過綁定 id 的方式用變數儲存起來。
並且在登入的地方加上監聽事件，並且觸發後把 modal 的 class 列表中移除 opacity-0 與 pointer-events-none，這樣就可以把彈窗打開；反之就是增加 opacity-0 與 pointer-events-none。
1
2
3
4
5
6
7
8
9
10
11
| let loginBtn = document.getElementById("login");
let modal = document.getElementById("modal");
let closeBtn = document.getElementById("close");
loginBtn.addEventListener("click", function () {
modal.classList.remove("opacity-0", "pointer-events-none");
});
closeBtn.addEventListener("click", function () {
modal.classList.add("opacity-0", "pointer-events-none");
});
|
操作方法