TailwindCSS - 價目表卡片實戰 - 登入彈窗開發 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 25

Modern Web

TailwindCSS - 從零開始系列第 25 篇

TailwindCSS - 價目表卡片實戰 - 登入彈窗開發

13th鐵人賽 tailwindcss

Tim Hsu

2021-10-08 11:20:03

1880 瀏覽

分享至

pop

此系列文章已改編成書，歡迎購買：https://www.tenlong.com.tw/products/9786267146460?list_name=i-r-zh_tw

這次要來實作一個登入的彈窗效果，以前做彈窗大多是使用 Bootstrap 的彈窗元件或是 lightbox 的套件。這次就用 TailwindCSS 直接來刻一個！

建立彈窗背景

因要將彈窗固定在畫面上，所以使用絕對定位的方式來寫，並且先把遮罩背景設定成深灰色。

HTML

 <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% 效果。

HTML

   <div class="absolute top-0 left-0 right-0 w-full h-full bg-gray-900/70"></div>

opacity

登入介面

在寫好的彈窗範圍內先建立一個簡單的登入表單內容，按鈕就沿用之前開發好的元件拿來使用。

 <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 事件，並且可以點擊到下方元素。

彈窗

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

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");
});

操作方法