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 相关文章推荐
Prototype 学习 工具函数学习($方法)
Jul 12 Javascript
Javascript继承机制的设计思想分享
Aug 28 Javascript
JavaScript中的null和undefined解析
Apr 14 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
Apr 01 Javascript
js中跨域方法原理详解
Jul 19 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Sep 01 Javascript
angularjs定时任务的设置与清除示例
Jun 02 Javascript
深入理解Vue2.x的虚拟DOM diff原理
Sep 27 Javascript
bootstrap datetimepicker控件位置异常的解决方法
Nov 23 Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 Javascript
vue-cli 3.x 修改dist路径的方法
Sep 19 Javascript
python实现迭代法求方程组的根过程解析
Nov 25 Javascript
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
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
php获取远程图片的两种 CURL方式和sockets方式获取远程图片
2011/11/07 PHP
php实现删除空目录的方法
2015/03/16 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
JavaScript 学习点滴记录
2009/04/24 Javascript
Javascript UrlDecode函数代码
2010/01/09 Javascript
基于jquery的让页面控件不可用的实现代码
2010/04/27 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
2014/03/03 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
微信小程序request请求后台接口php的实例详解
2017/09/20 Javascript
jQuery实现的简单图片轮播效果完整示例
2018/02/08 jQuery
解决jQuery使用append添加的元素事件无效的问题
2018/08/30 jQuery
Webpack4+Babel7+ES6兼容IE8的实现
2019/04/10 Javascript
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
python字典DICT类型合并详解
2017/08/17 Python
Python rstrip()方法实例详解
2018/11/11 Python
Python中and和or如何使用
2020/05/28 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
pycharm配置安装autopep8自动规范代码的实现
2021/03/02 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
新加坡最佳婴儿用品店:Mamahood.com.sg
2018/08/26 全球购物
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
大学生就业自荐信
2013/10/26 职场文书
汽车专业毕业生推荐信
2013/11/12 职场文书
项目建议书模板
2014/05/12 职场文书
贷款委托书怎么写
2014/08/02 职场文书
酒会邀请函
2015/01/31 职场文书
工会文体活动总结
2015/05/07 职场文书
药房管理制度范本
2015/08/06 职场文书
幼儿体育课教学反思
2016/02/16 职场文书
Html5生成验证码的示例代码
2021/05/10 Javascript
Java实现给Word文件添加文字水印
2022/02/15 Java/Android