TailwindCSS - 价目表卡片实战 - 登入弹窗开发

pop

这次要来实作一个登入的弹窗效果,以前做弹窗大多是使用 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

在颜色後面加一个 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>

login

隐藏登入介面与可点到登入按钮

在弹窗的部份加上透明度为 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 做出弹窗效果

在原本登入、弹窗与关闭的地方,都个别加上 idlogin, modal,close 等名称,然後再透过绑定 id 的方式用变数储存起来。

并且在登入的地方加上监听事件,并且触发後把 modal 的 class 列表中移除 opacity-0pointer-events-none,这样就可以把弹窗打开;反之就是增加 opacity-0pointer-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");
});

操作方法


<<:  Day 23. slate × Operation × L-transform

>>:  【24】如果把 Dropout 放在 CNN 之後会发生什麽事

D25 - 用 Swift 和公开资讯,打造投资理财的 Apps { 三大法人成交比重 资料分析 }

台湾股市有揭露三大法人当日买进卖出的金额,在市场上会有流派依照这些进出的资讯,调整手上的资金部位。因...

为什麽CISSP在台湾不被重视?

很多人考过CISSP後,不但没有升官、也没有加薪;甚至没有得到公司应有的重视,反而平白增加不少资安...

[NestJS 带你飞!] DAY01 - 简介

近年来,前後端都可以看到 JavaScript 的踪影,Node.js 的诞生让 JavaScrip...

食谱搜寻系统_Node.js测试~~

由於Node.js的下载过程其实非常简单,没有什麽需要特别注意的,所以Icebear直接进入测试环节...

Day 15 - 从Business Intelligence(BI)到AI

图片来源 很多时候讲多了数据分析, 会让人傻傻分不清楚到底是要用AI(人工智慧)还是BI(商业智慧...