1.JS弹窗登录效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><!--GBK与UTF-8由公司服务器决定-->
<meta name="Generator" content="Webstorm">
<meta name="Author" content="奇客艺术">
<meta name="keyword" content="关键字">
<meta name="description" content="描述">
<title>JS弹窗登录效果</title>
<style type="text/css">
*{margin: 0;padding: 0;}
a{color: black;text-decoration: none;font-size: 14px;}
a:hover{text-decoration: underline}
#href{float: right;margin-right: 20px;}
#bg{background:rgba(0,0,0,0.5);/*背景颜色半透明opacity:0.5*/
width:100%;height: 100%;position: fixed;left: 0;top: 0;display: none}
#login{width: 600px;height: 350px;background: white;position: fixed;display: none}
#login #title{color: white;background: #ff9933;width: 100%;height: 50px;line-height: 50px;font-size: 24px;}
#login #title .close{font-size: 24px;color: white;float: right;margin-right: 15px;text-decoration: none}
#login p{margin-top: 35px;margin-left: 120px;}
#login form p input{width:260px;height:35px;border:1px solid #dddddd;font-size: 18px;}
#login form p .text,.psw{background: rgba(250,255,189,1);}
#login form p .sub{margin-left: 65px;background: url("images/2017-07-25_123222.png");}
</style>
</head>
<body>
<div id="href"><a class="dl" href="javascript:">登录</a>&nbsp;<a href="javascript:">注册</a></div><!--作为按钮,用js禁止，使点击不跳转也不刷新-->
<div id="bg"></div>
<div id="login">
<div id="title">用户登录<a class="close" href="javascript:">X</a></div>
<form action="javascript:" target="">
<p>用户名：<input type="text" class="text" maxlength="26"></p>
<p>密&nbsp;码：<input type="password" class="psw" maxlength="16"/></p>
<p><input type="submit" class="sub" value=""/></p>
</form>
</div>
<script src="js/jquery-3.2.1.js"></script>
<script>
playauto();//playauto()函数控制弹出框居中显示
function playauto() {
var _width=$(window).width();//获取浏览器窗口宽度
var _height=$(window).height();//获取高度
$(" #login").css({left:_width/2-300,top:_height/2-175});//使弹出框居中
}
//动态改变浏览器窗口时执行
$(window).resize(function () {
playauto();//浏览器窗口大小改变，则重新执行playauto()函数，使弹出框居中
} );
$(".dl").click(function () {//点击超链接按钮显示bg、login样式
playauto();//再次点击登陆按钮时，弹出框仍然处于居中位置
$("#bg").show();
$("#login").show();
})
$(".close").click(function () {//点击弹出框上的X按钮隐藏bg、login样式，即关闭弹出框
$("#bg").hide();
$("#login").hide();
});
$("#login").mousedown(function(e){
var x=e.clientX;//鼠标按下的X坐标
var y=e.clientY;//鼠标按下的Y坐标
var $left=$("#login").offset().left;//登陆框距离左边位置
var $top=$("#login").offset().top;//登陆框距离顶部位置
var l=x-$left;//点击的坐标点距离弹出框左边的距离
var t=y-$top;//点击的坐标点距离弹出框上边的距离
$(document).mousemove(function (e) {
var nx=e.clientX;
var ny=e.clientY;
var n_left=nx-l;//动态得到弹出框距离浏览器左边距离
var n_top=ny-t;//动态得到弹出框距离浏览器上边距离
$(" #login").css({left: n_left,top:n_top});
});
$(document).mouseup(function () {
$(document).unbind("mousemove");//解除鼠标移动事件
$(document).unbind("mouseup");
})
})
</script>
</body>
</html>

2.效果图

JS弹窗登陆效果.zip

js弹窗登录效果(源码)--web前端的更多相关文章

  1. spring security之 默认登录页源码跟踪

    spring security之 默认登录页源码跟踪 ​ 2021年的最后2个月,立个flag,要把Spring Security和Spring Security OAuth2的应用及主流程源码研究透 ...

  2. Shiro 登录认证源码详解

    Shiro 登录认证源码详解 Apache Shiro 是一个强大且灵活的 Java 开源安全框架,拥有登录认证.授权管理.企业级会话管理和加密等功能,相比 Spring Security 来说要更加 ...

  3. jQuery+css3实现极具创意的罗盘旋转时钟效果源码

    效果 HTML代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  4. 50个Android开发人员必备UI效果源码[转载]

    50个Android开发人员必备UI效果源码[转载] http://blog.csdn.net/qq1059458376/article/details/8145497 Android 仿微信之主页面 ...

  5. 非常不错的KPTimePicker效果源码

    非常不错的KPTimePicker效果源码,实现特殊设计的时间选择器.用户选择时间是通过滑动一个圆环,并且屏幕的颜色会随着时间点的推移变暗或者变亮,喜欢的朋友可以下载研究一下吧. 源码大家可以到源码天 ...

  6. [转载] 50个Android开发人员必备UI效果源码

    好东西,多学习! Android 仿微信之主页面实现篇Android 仿微信之界面导航篇Android 高仿QQ 好友分组列表Android 高仿QQ 界面滑动效果Android 高仿QQ 登陆界面A ...

  7. diff.js 列表对比算法 源码分析

    diff.js列表对比算法 源码分析 npm上的代码可以查看 (https://www.npmjs.com/package/list-diff2) 源码如下: /** * * @param {Arra ...

  8. Delphi制作QQ自动登录器源码

    Delphi制作QQ自动登录器源码  http://www.cnblogs.com/sunsoft/archive/2011/02/25/1964967.html 以TM2009为例,检查了一下,未登 ...

  9. 推荐！Html5精品效果源码分享

    一直在看别人的汇总,看到了一些不错的关于 HTML5内容的源码,我也汇总下分享出来,好东西需要共享!希望可以帮到需要的朋友. 1.劲爆分享:HTML5动感的火焰燃烧动画特效 这又是一款基于HTML5的 ...

随机推荐

  1. 一、爬虫的基本体系和urllib的基本使用

    爬虫 网络是一爬虫种自动获取网页内容的程序,是搜索引擎的重要组成部分.网络爬虫为搜索引擎从万维网下载网页.一般分为传统爬虫和聚焦爬虫. 爬虫的分类 传统爬虫从一个或若干初始网页的URL开始,获得初始网 ...

  2. CentOS7上Docker安装与卸载

    安装 1.安装Docker 参见:https://docs.docker.com/engine/installation/linux/centos/ 2.直接使用root安装(更新系统) yum up ...

  3. SQL SERVER FOR LINUX初体验

    今天得空,就在Ubuntu17.04上安装了SQL SERVER 2017体验下,总体来说还是不错的. 在Ubuntu上安装SQL SERVER 2017还是比较方便的,只需几条命令即可: curl ...

  4. 基于agenda的Nodejs定时任务管理框架搭建

    0.背景 在大型项目中,定时任务的应用场景越来越广.一般来说,按照微服务的思想,我们会将定时任务单独部署一套服务,核心的业务接口独立到另一个服务中,从而降低相互之间的耦合程度.在需要使用定时任务时,只 ...

  5. GCD实现倒计时

    之前面试中,好多面试官,问使用GCD如何实现倒计时,我当时也没写过,所以一时不知道怎么说,所以结束之后,我实现一下GCD的倒计时. - (void)startTime:(UIButton *)send ...

  6. Java文件及文件夹的创建与删除

    功能 这个实例实现了在D盘创建一个文件和文件夹,并删除它们. 函数介绍 createNewFile():当文件不存在时,根据绝对路径创建该文件.     delete():删除文件或者文件夹.     ...

  7. UESTC 251 最长上升子序列O（nlgn）

    O(n^2)过不了.必须要用一个额外的数组保存当前长度最小值,然后lgn查表 AC代码 #include<cstdio> #include<algorithm> using n ...

  8. HDU - 2160 递推

    思路:dp(i)表示第i天的猪的数量,g(i)表示第i天新出生的猪的数量,d(i) = d(i-1) * 2 - g(i-2), g(i) = d(i-1) AC代码 #include <cst ...

  9. Docker系统六：Docker网络管理

    Docker网络 I. Docer的通信方式 默认情况下,Docker使用网桥(brige)+ NAT的通信模型. Docker启动时会自动创建网桥Docker0,并配置ip 172.17.0.1/1 ...

  10. 转：彻底搞清referrer和origin

    在http协议中有这两个字段,之前一直隐隐约约的觉得是,一种标记请求来源的方法(的确是),但是更细致的对这两个字段的比较却没有一个清楚的认识. referrer 到底是referer还是referre ...