这次要来实作一个登入的弹窗效果,以前做弹窗大多是使用 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>
在写好的弹窗范围内先建立一个简单的登入表单内容,按钮就沿用之前开发好的元件拿来使用。
<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>
在原本登入、弹窗与关闭的地方,都个别加上 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");
});
操作方法
<<: Day 23. slate × Operation × L-transform
>>: 【24】如果把 Dropout 放在 CNN 之後会发生什麽事
台湾股市有揭露三大法人当日买进卖出的金额,在市场上会有流派依照这些进出的资讯,调整手上的资金部位。因...
很多人考过CISSP後,不但没有升官、也没有加薪;甚至没有得到公司应有的重视,反而平白增加不少资安...
近年来,前後端都可以看到 JavaScript 的踪影,Node.js 的诞生让 JavaScrip...
由於Node.js的下载过程其实非常简单,没有什麽需要特别注意的,所以Icebear直接进入测试环节...
图片来源 很多时候讲多了数据分析, 会让人傻傻分不清楚到底是要用AI(人工智慧)还是BI(商业智慧...