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 相关文章推荐
jQuery在html有效在jsp无效的原因及解决方法
Aug 02 Javascript
Jquery中val()表单取值赋值的实例代码
Aug 15 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
Jan 07 Javascript
防止登录页面出现在frame中js代码
Jul 22 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
jQuery处理json数据返回数组和输出的方法
Mar 11 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
Dec 20 Javascript
浅谈JavaScript正则表达式-非捕获性分组
Mar 08 Javascript
vue 项目常用加载器及配置详解
Jan 22 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
Aug 12 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
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生成自己的LOG文件
2006/10/09 PHP
多重?l件?合查?(二)
2006/10/09 PHP
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
编写安全 PHP应用程序的七个习惯深入分析
2013/06/08 PHP
PHP扩展开发入门教程
2015/02/26 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
jquery验证表单中的单选与多选实例
2013/08/18 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
2016/01/03 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
微信小程序之picker日期和时间选择器
2017/02/09 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
2017/02/22 Javascript
Angular2使用jQuery的方法教程
2017/05/28 jQuery
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
2020/06/01 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
python批量修改文件后缀示例代码分享
2013/12/24 Python
深入理解Python中字典的键的使用
2015/08/19 Python
Python基于回溯法子集树模板解决0-1背包问题实例
2017/09/02 Python
Django 视图层(view)的使用
2018/11/09 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
2016/11/14 HTML / CSS
YSL圣罗兰美妆英国官网:Yves Saint Laurent Beauty UK
2019/08/03 全球购物
Java的基础面试题附答案
2016/01/10 面试题
2014年小学国庆节活动方案
2014/09/16 职场文书
党支部考察意见范文
2015/06/02 职场文书
大国崛起英国观后感
2015/06/02 职场文书
战友聚会致辞
2015/07/28 职场文书