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


Posted in Javascript onSeptember 26, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
学习ExtJS 访问容器对象
Oct 07 Javascript
Javascript调用C#代码
Jan 17 Javascript
广泛收集的jQuery拖放插件集合
Apr 09 Javascript
js函数返回多个返回值的示例代码
Nov 05 Javascript
JS 使用for循环遍历子节点查找元素
Sep 06 Javascript
Vue实现点击时间获取时间段查询功能
Aug 21 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 Javascript
JavaScript设计模式之观察者模式实例详解
Jan 16 Javascript
JavaScript回调函数callback用法解析
Jan 14 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 Javascript
vue实现轮播图帧率播放
Jan 26 Vue.js
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 #Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 #Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 #Javascript
jQuery超简单选项卡完整实例
Sep 26 #Javascript
angularjs学习笔记之简单介绍
Sep 26 #Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 #Javascript
JS实现仿QQ效果的三级竖向菜单
Sep 25 #Javascript
You might like
php获取客户端电脑屏幕参数的方法
2015/01/09 PHP
PHP常用排序算法实例小结【基本排序,冒泡排序,快速排序,插入排序】
2017/02/07 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
js实现页面转发功能示例代码
2013/08/05 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
2013/08/13 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
浅析javascript函数表达式
2016/02/10 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
JavaScript递归算法生成树形菜单
2017/08/15 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
2018/10/26 Javascript
微信小程序获取用户openid的实现
2018/12/24 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
2019/05/21 Javascript
基于Vue中使用节流Lodash throttle详解
2019/10/30 Javascript
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
使用Python导出Excel图表以及导出为图片的方法
2015/11/07 Python
numpy.transpose对三维数组的转置方法
2018/04/17 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
对python实现合并两个排序链表的方法详解
2019/01/23 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
html5指南-6.如何创建离线web应用程序实现离线访问
2013/01/07 HTML / CSS
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
KLOOK客路:发现更好玩的世界,预订独一无二的旅行体验
2016/12/16 全球购物
介绍一下Java中标识符的命名规则
2014/02/03 面试题
护士自我介绍信
2014/01/13 职场文书
《在山的那边》教学反思
2014/02/23 职场文书
霸气队列口号
2014/06/18 职场文书
银行给客户的感谢信
2015/01/23 职场文书
环保守法证明
2015/06/24 职场文书
Go语言应该什么情况使用指针
2021/07/25 Golang