jQuery實(shí)現(xiàn)的登錄浮動(dòng)框效果代碼
本文實(shí)例講述了jQuery實(shí)現(xiàn)的登錄浮動(dòng)框效果代碼。分享給大家供大家參考。具體如下:
這是一款jQuery登錄浮動(dòng)框代碼,點(diǎn)擊登錄按鈕后可看到彈出了一個(gè)浮動(dòng)層,右上角帶有關(guān)閉按鈕,本浮動(dòng)層不支持拖動(dòng),在網(wǎng)上經(jīng)常會(huì)見(jiàn)到的一種浮動(dòng)層格式。
運(yùn)行效果截圖如下:
在線演示地址如下:
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登錄浮動(dòng)框代碼</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="#">注冊(cè)</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>
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
- JS模擬Dialog彈出浮動(dòng)框效果代碼
- jQuery實(shí)現(xiàn)仿新浪微博浮動(dòng)的消息提示框(可智能定位)
- JavaScript實(shí)現(xiàn)的浮動(dòng)層框架用法實(shí)例分析
- 基于jquery的一個(gè)浮動(dòng)框(擴(kuò)展性比較好 )
- 在js(jquery)中獲得文本框焦點(diǎn)和失去焦點(diǎn)的方法
- 九種js彈出對(duì)話框的方法總結(jié)
- js中判斷文本框是否為空的兩種方法
- js限制文本框只能輸入數(shù)字方法小結(jié)
- js監(jiān)聽輸入框值的即時(shí)變化onpropertychange、oninput
- 簡(jiǎn)單實(shí)現(xiàn)js浮動(dòng)框
相關(guān)文章
S2SH整合JQuery+Ajax實(shí)現(xiàn)登錄驗(yàn)證功能實(shí)現(xiàn)代碼
登錄驗(yàn)證,在項(xiàng)目開發(fā)中很常用的,尤其是這一塊非常有利于用戶體驗(yàn),感興趣的朋友可以參考下,或許對(duì)你學(xué)習(xí)登陸驗(yàn)證有所幫助,好了閑話不多說(shuō)了,看代碼2013-01-01jQuery操作checkbox選擇(list/table)
本文將介紹下checkbox list選擇及checkbox table選中附效果圖,感興趣的朋友可以參考下哈,希望可以幫助到你2013-04-04jQuery 自動(dòng)增長(zhǎng)的文本輸入框?qū)崿F(xiàn)代碼
文本輸入框內(nèi)的字?jǐn)?shù)不能確定,而input type="text"的size是固定的,當(dāng)字?jǐn)?shù)超過(guò)size時(shí)(默認(rèn)是20),先輸入的內(nèi)容就會(huì)從文本框的左端隱藏起來(lái),不便于輸入。2010-04-04jQuery代碼實(shí)現(xiàn)表格中點(diǎn)擊相應(yīng)行變色功能
對(duì)于一個(gè)表格,為了更好的用戶體驗(yàn)度,需要把選中的表格項(xiàng)添加高亮,下面小編給大家介紹使用jquery實(shí)現(xiàn)表格中點(diǎn)擊相應(yīng)行變色功能的實(shí)例代碼,需要的朋友參考下2016-05-05jquery與js實(shí)現(xiàn)全選功能的區(qū)別
這篇文章主要介紹了jquery與js實(shí)現(xiàn)全選功能的區(qū)別,需要的朋友可以參考下2017-06-06dreamweaver 8實(shí)現(xiàn)Jquery自動(dòng)提示
這篇文章主要介紹了dreamweaver 8實(shí)現(xiàn)Jquery自動(dòng)提示的方法,需要的朋友可以參考下2014-12-12