jQuery實作的登入浮動框效果碼_jquery-js教程-PHP中文網

首頁

web前端

js教程

jQuery實作的登入浮動框效果碼_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:38 PM

jquery 浮動框登入

本文實例講述了jQuery實現的登入浮動框效果代碼。分享給大家供大家參考。具體如下：

這是一款jQuery登入浮動框代碼，點擊登入按鈕後可看到彈出了一個浮動層，右上角帶有關閉按鈕，本浮動層不支援拖曳，在網路上經常會見到的一種浮動層格式。

運作效果截圖如下：

線上示範網址如下：

http://demo.jb51.net/js/2015/jquery-float-login-dlg-style-demo/

具體程式碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery登录浮动框代码</title>
<style type="text/css">
body{ margin:0px; padding:0px; background-color:#f0f0f0; font-family:Arial, Helvetica, sans-serif;}
a{ text-decoration:none;}
.top{ width:760px; height:30px; border-bottom:1px solid #dbdbdb; margin:0px auto;}
.logo{ width:300px; height:30px; line-height:30px; float:left; font-size:14px; margin:0px 5px;}
.logo a{ color:#666666;}
.denglu{ height:30px; line-height:30px; float:right; font-size:14px;}
.denglu a{ color:#666666; margin:0px 10px;}
.clear{ display:block; height:0px; line-height:0px; font-size:0px; clear:both;}
.fd{ width:100%; height:auto; position:absolute; top:150px; left:0px; z-index:1; display:none;}
.fd_box{ width:320px; height:auto; margin:0px auto; position:relative; }
.tm_box{ width:300px; height:200px; padding:10px; background-color:#FFFFFF; -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px; FILTER: alpha(opacity=50); opacity: 0.5; -moz-opacity: 0.5; position:absolute; top:0px; left:0px; z-index:2;}
.denglu_box{ width:280px; height:180px; padding:10px; background-color:#FFFFFF; -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px; position:absolute; top:10px; left:10px; z-index:3; font-family:"宋体";}
.denglu_box h1{ width:270px; height:30px; line-height:30px; font-size:14px; margin:0px; padding:0px 5px; font-weight:100; color:#666666; border-bottom:1px solid #009999;}
.denglu_box span{ color:#666666; display:block; margin:10px 0px; padding:0px 5px;}
.guanbi{ width:14px; height:13px; background-image:url(images/close.gif); background-repeat:no-repeat; position:absolute; top:25px; right:25px; z-index:4; cursor: pointer;}
.box{ width:760px; height:auto; margin:0px auto; border-top:1px solid #f9f9f9;}
.box img{ margin:50px auto; display:block; border:0px;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#mj").click( function(){
   $(".fd").show();
 return false;
  });
  $(".guanbi").click( function(){
  $(".fd").hide();
  });
})
</script>
</head>
<body>
<div class="top">
<div class="logo"><a href="#">MJBlog</a></div>
<div class="denglu"><a href="denglu.html" id="mj">登录</a><a href="#">注册</a></div>
<div class="clear"></div>
</div>
<div class="box"><a href="#"><img src="images/wall3.jpg" /></a></div>
<div class="fd">
<div class="fd_box">
<div class="tm_box"></div>
<div class="denglu_box">
<h1>用户登录</h1>
<span>用户名：<input name="" type="text" /></span>
<span>密  码：<input name="" type="text" /></span>
</div>
<div class="guanbi"></div>
</div>
</div>
</body>
</html>

登入後複製

希望本文所述對大家的jQuery程式設計有所幫助。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1668

CakePHP 教程

1427

Laravel 教程

1329

PHP教程

1273

C# 教程

1256

Related knowledge

小紅書怎麼登入以前的帳號？它換綁後原來號碼遺失了怎麼辦？ Mar 21, 2024 pm 09:41 PM

隨著社群媒體的快速發展，小紅書成為許多年輕人分享生活、探索新產品的熱門平台。在使用過程中，有時使用者可能會遇到登入先前帳號的困難。本文將詳細探討如何解決小紅書登入舊帳號的問題，以及如何應對更換綁定後可能遺失原帳號的情況。一、小紅書怎麼登入以前的帳號？ 1.找回密碼登入如果長時間未登入小紅書，可能導致帳號被系統回收。為了恢復存取權限，你可以嘗試透過找回密碼的方式重新登入帳號。操作步驟如下：（1）開啟小紅書App或官網，點選「登入」按鈕。（2）選擇「找回密碼」。（3）輸入你註冊帳號時所使用的手機號碼

wallpaperengine登入別的號碼後下載別人的桌布怎麼辦 Mar 19, 2024 pm 02:00 PM

當你在自己電腦上登過別人steam帳號之後，剛好這個別人的帳號也有wallpaper軟體，切換回自己帳號之後steam就會自動下載別人帳號訂閱的桌布，使用者可以透過關閉steam雲端同步解決。 wallpaperengine登入別的號碼後下載別人的桌布怎麼辦1、登陸你自己的steam帳號，在設定裡面找到雲端同步，關閉steam雲端同步。 2.登陸你之前登陸的別人的steam帳號，打開wallpaper創意工坊，找到訂閱內容，然後取消全部訂閱。（以後防止找不到壁紙，可以先收藏再取消訂閱）3、切換回自己的stea

Discuz後台登入問題解決方法大揭秘 Mar 03, 2024 am 08:57 AM

Discuz後台登入問題解決方法大揭秘，需要具體程式碼範例隨著網路的快速發展，網站建置變得越來越普遍，而Discuz作為一款常用的論壇建站系統，受到了許多站長的青睞。然而，正是因為其功能強大，有時候我們在使用Discuz的過程中會遇到一些問題，例如後台登入問題。今天，我們就來大揭秘Discuz後台登入問題的解決方法，並且提供具體的程式碼範例，希望能幫助到有需要

快手電腦版怎麼登入-快手電腦版的登入方法 Mar 04, 2024 pm 03:30 PM

近日有一些小夥伴諮詢小編快手電腦版怎麼登入?下面就為大家帶來了快手電腦版的登入方法，有需要的小夥伴可以來了解了解哦。第一步：先在電腦的瀏覽器上百度搜尋快手官網。第二步：在搜尋結果清單裡面選取第一條。第三步：進入快手官網主頁面後，點選影片的選項。第四步：點選右上角的使用者頭像。步驟五：在彈出的登入選單裡面點選二維碼登入。步驟六：之後打開手機上的快手，點選左上角的圖示。第七步：點選二維碼標誌。第八步：在我的二維碼介面點擊右上角的掃描圖示之後，掃描電腦上的二維碼即可。第九步：最後電腦版的快手就登入成

百度網盤網頁版怎麼進？百度網盤網頁版登入入口 Mar 13, 2024 pm 04:58 PM

　　百度網盤不僅能儲存各種軟體資源，還能分享給別人，支援多端同步，如果你的電腦沒有下載客戶端，可以選擇進入網頁版使用。那麼百度網盤網頁版要怎麼登入呢？下面就來看看詳細介紹。　　百度網盤網頁版登入入口：https://pan.baidu.com（複製連結至瀏覽器開啟）　　軟體介紹　　1、分享　　提供文件分享功能，使用者將文件整理，分享給需要的小夥伴。　　2、雲端　　不佔用太多內存，大多數檔案都保存在雲端，有效節省電腦空間。　　3、相簿　　支援雲相簿功能，將照片匯入到雲盤中，然後整理，方便大家查看。　　

小紅書只記得帳號怎麼登入？只記得帳號怎麼找回來？ Mar 23, 2024 pm 05:31 PM

小紅書如今已經融入了許多人的日常生活，其豐富的內容和便捷的操作方式讓使用者樂此不疲。有時候，我們可能會忘記帳號密碼，只記得帳號而無法登入確實讓人感到困擾。一、小紅書只記得帳號怎麼登入？當忘記密碼時，我們可以透過手機驗證碼的方式登入小紅書。具體操作如下：1.開啟小紅書App或網頁版小紅書；2.點選「登入」按鈕，選擇「帳號密碼登入」；3.點選「忘記密碼？」按鈕；4.輸入你的帳號，點選「下一步」；5.系統會發送驗證碼到你的手機，輸入驗證碼後點選「確定」；6.設定新的密碼並確認。你也可以透過第三方帳號（如

如何解決Laravel登入時間失效的常見問題 Mar 06, 2024 pm 09:24 PM

如何解決Laravel登入時間失效的常見問題在使用Laravel開發Web應用程式時，登入認證是一個非常重要的功能。然而，有時候使用者登入後長時間不操作，頁面可能會自動登出或認證失效。這個問題較為常見，以下將介紹如何透過設定session的時間來解決這個問題，並提供具體的程式碼範例。 1.設定session的過期時間在Laravel中，預設為sessi

谷歌瀏覽器無法登入帳號怎麼辦？谷歌瀏覽器帳號不能登入解決方法 Mar 13, 2024 pm 02:10 PM

　　谷歌瀏覽器無法登入帳號怎麼辦？很多用戶在使用這款軟體的時候，某些功能需要用戶們登入谷歌帳號才可以使用，但是嘗試了很多次，都沒有登入成功，面對這個問題，不少用戶都不知道應該如何解決，那麼本期小編就來和各位分享解決方法，希望今日的軟體教程內容可以為大夥帶來幫助。　　解決方法如下：　　1、點選桌面一個瀏覽器，開啟之後看到這個樣子。　　2、此時如果彈出登錄，點擊它，如看不到的點擊右上角。　　3、點選登錄，然後輸入你的帳號，帳號不用輸入@之後的一節，點選下一步。　　4、輸入密碼，看到這個提示，點選啟用

See all articles

jQuery實作的登入浮動框效果碼_jquery

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題