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 相关文章推荐
js同时按下两个方向键
Dec 01 Javascript
JavaScript 解析读取XML文档 实例代码
Jul 07 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
Dec 12 Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 Javascript
jquery可定制的在线UEditor编辑器
Nov 17 Javascript
jQuery获取当前点击的对象元素(实现代码)
May 19 Javascript
JavaScript 节流函数 Throttle 详解
Jul 04 Javascript
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
node.js使用express框架进行文件上传详解
Mar 03 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
Jun 23 Javascript
vue实现下载文件流完整前后端代码
Nov 17 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
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
解析php中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
php使用pack处理二进制文件的方法
2014/07/03 PHP
php 读取输出其他文件的实现方法
2016/07/26 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
无缝滚动改进版支持上下左右滚动(封装成函数)
2012/12/04 Javascript
js字母大小写转换实现方法总结
2013/11/13 Javascript
jQuery中last()方法用法实例
2015/01/06 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
微信小程序之蓝牙的链接
2017/09/26 Javascript
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
AngularJs 终极购物车(实例讲解)
2017/11/08 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
对Layer UI 模块化的用法详解
2019/09/26 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
手写Vue源码之数据劫持示例详解
2021/01/04 Vue.js
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
Python深入06——python的内存管理详解
2016/12/07 Python
基于python框架Scrapy爬取自己的博客内容过程详解
2019/08/05 Python
amazeui模态框弹出后立马消失并刷新页面
2020/08/19 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
2020/09/15 HTML / CSS
飞利浦西班牙官方网站:Philips西班牙
2020/02/17 全球购物
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
关键字final的用法
2013/10/02 面试题
跟单业务员岗位职责
2014/03/08 职场文书
秋天的雨教学反思
2014/04/27 职场文书
保护地球的标语
2014/06/17 职场文书
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
2014村书记党建工作汇报材料
2014/11/02 职场文书
会计师事务所实习证明
2014/11/16 职场文书
社区低保工作总结2015
2015/07/23 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL
Django中celery的使用项目实例
2022/07/07 Python