中国建设银行招聘信息网站6,推广游戏网站怎么做,百度竞价开户3000,传媒公司招聘信息写了一段html代码实现的效果#xff1a;实现右上角有个图标#xff0c;鼠标移动到该位置出现手型#xff0c;点击会弹出登录窗口。功能实现前端#xff0c;没有实现后端。!DOCTYPE html
html langzh-CN
headmeta charsetUTF…写了一段html代码实现的效果实现右上角有个图标鼠标移动到该位置出现手型点击会弹出登录窗口。功能实现前端没有实现后端。
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title精选商品/titlescript srchttps://cdn.tailwindcss.com/scriptlink relstylesheet hrefhttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.cssstyle/* 遮罩层 */.modal-overlay {transition: opacity 0.3s ease;opacity: 0;pointer-events: none;}.modal-overlay.active {opacity: 1;pointer-events: all;}/* 登录窗口 */.login-modal {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%) scale(0.95);opacity: 0;pointer-events: none;transition: all 0.3s ease;z-index: 50;}.login-modal.active {transform: translate(-50%, -50%) scale(1);opacity: 1;pointer-events: all;}/style
/head
body classbg-gray-100 relative!-- 右上角登录图标 --
div classabsolute top-4 right-4 z-10button idloginBtn classw-12 h-12 rounded-full bg-blue-500 flex items-center justify-center text-white shadow hover:bg-blue-600 transition cursor-pointeri classfa-solid fa-user text-xl/i/button
/div!-- 登录窗口遮罩层 --
div idmodalOverlay classmodal-overlay fixed inset-0 bg-black/50/div!-- 登录窗口 --
div idloginModal classlogin-modal bg-white rounded-lg shadow-xl w-full max-w-md p-6div classflex justify-end mb-4button idcloseBtn classtext-gray-500 hover:text-gray-700 transitioni classfa-solid fa-times text-xl/i/button/divdiv classspace-y-4h2 classtext-2xl font-bold text-center text-gray-800账号登录/h2divlabel forusername classblock text-sm font-medium text-gray-700 mb-1用户名/手机号/labelinput typetext idusername classw-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition placeholder请输入用户名或手机号/divdivlabel forpassword classblock text-sm font-medium text-gray-700 mb-1密码/labelinput typepassword idpassword classw-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition placeholder请输入密码/divdiv classflex items-center justify-betweenlabel classflex items-center text-sm text-gray-600input typecheckbox classmr-2 h-4 w-4 text-blue-500 focus:ring-blue-500 border-gray-300 rounded记住我/labela href# classtext-sm text-blue-500 hover:text-blue-600 transition忘记密码/a/divbutton classw-full bg-blue-500 text-white font-medium py-2 px-4 rounded-lg hover:bg-blue-600 transition登录/buttondiv classtext-center text-sm text-gray-600 mt-4还没有账号a href# classtext-blue-500 hover:text-blue-600 font-medium transition立即注册/a/div/div
/divscriptconst loginBtn document.getElementById(loginBtn);const loginModal document.getElementById(loginModal);const closeBtn document.getElementById(closeBtn);const modalOverlay document.getElementById(modalOverlay);function openLoginModal() {loginModal.classList.add(active);modalOverlay.classList.add(active);document.body.style.overflow hidden;}function closeLoginModal() {loginModal.classList.remove(active);modalOverlay.classList.remove(active);document.body.style.overflow ;}loginBtn.addEventListener(click, openLoginModal);closeBtn.addEventListener(click, closeLoginModal);modalOverlay.addEventListener(click, closeLoginModal);document.addEventListener(keydown, (e) {if (e.key Escape loginModal.classList.contains(active)) {closeLoginModal();}});
/script
/body
/html
