jQuery实现的登录浮动框效果代码

本文实例讲述了jQuery实现的登录浮动框效果代码。分享给大家供大家参考。具体如下：

这是一款jQuery登录浮动框代码，点击登录按钮后可看到弹出了一个浮动层，右上角带有关闭按钮，本浮动层不支持拖动，在网上经常会见到的一种浮动层格式。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-float-log in-DLG风格-演示/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=gb2312' /titlejQuery登录浮动框代码/title style type=' text/CSS ' body { margin :0 px；padding:0px背景-颜色： # f0f 0；字体系列Helvetica阿里亚尔：无衬线；} a { text-decoration : none}.顶部{宽度：760像素高度：30 px边框-底部：1 px实心# dbdbdbdb余量：0px汽车；}.徽标{宽度：300像素高度：30 px线高：30 pxfloat : left font-size :14 px；margin:0px 5px}。徽标a { color: # 666666 }。邓璐；线高：30 px右浮动：font-size :14 px}.邓璐a { color : # 666666 margin :0 px 10px }。清除{ display : block height :0 px线高：0 pxfont-size :0 pxclear:both}。FD {宽度：100%；高度：自动位置：绝对；top:150pxleft:0pxz索引：1;display:none}。FD _ box { width :320 pxheart : auto margin :0 px汽车；位置：相对；}.tm _ box { width:300px高度：200 pxpadding:10px背景-color : # FFFFFF；-web套件-边框-半径：5 px-moz-边界-半径：5 px边界半径：5像素；滤波器：(不透明度=50);opa city 3360 0.5-moz-opa city 3360 0.5；位置：绝对；top:0pxleft:0pxz索引：2;}.邓璐_ box { width:280px高度：180 pxpadding:10px背景-color : # FFFFFF；-web套件-边框-半径：5 px-moz-边界-半径：5 px边界半径：5像素；位置：绝对；top:10pxleft:10pxz索引：3;字体系列： '宋体；}.邓璐_ box h1 { width:270px高度：30 px线高：30 pxfont-size :14 pxmargin :0 pxpadding :0 px 5pxfont-weight :100；颜色： # 666666边框-底部：1px实心# 009999;}.邓璐_ box span { color: # 66666显示：块；margin :10 px 0pxpadding :0 px 5px }。Guan bi { width :14 px h8 :13 px背景-图像： URL(图像/关闭。gif)；背景-重复：不重复；位置：绝对；top:25pxright:25pxz索引：4;光标：指针；}.盒子{宽度：760像素重量：像素重量：0像素汽车；边框-top:1px实心# F9 F9 F9 F9；}.box img { margin:50px auto显示：块；border:0px}/style脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/script脚本类型=' text/JavaScript ' $(文档)。ready(function(){ $('#mj ')).单击(函数(){ $(').FD ').show()；返回false })；$('."观壁")。单击(函数(){ $(').FD ').hide()；});})/script/headdy div class=' top ' div class=' logo ' a href=' # ' MJBlog/a/div div class='邓璐a href='denglu.html' id='mj '登录/aa href='# '注册/a/div div class=' clear '/div/div class=' box ' a href=' # ' img src=' http : images/wall 3。jpg '/a/div class=' FD ' div class=' FD _ box ' div class=' TM _ box '/div div class='邓璐_box'h1用户登录/h1span用户名：输入名称=' type=' text '/span span密码：输入名称=' type=' text '/span/div class=' Guan bi '/div/div/div/body/html希望本文所述对大家的jQuery程序设计有所帮助。