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. [Python Study Notes]CS架构远程访问获取信息--SERVER端

    ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' ...

  2. Vue站点的搭建之旅

      背景       很久没写博客了,这次博客分享一下最近上班空闲时间做的两个业余Demo.分别是V电影App的移动端站点[一直很喜欢用这个APP可是他们没有出对应的mobile端,所以自己开发一个, ...

  3. 描述进程的PCB

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  4. 图论算法-网络最大流【EK;Dinic】

    图论算法-网络最大流模板[EK;Dinic] EK模板 每次找出增广后残量网络中的最小残量增加流量 const int inf=1e9; int n,m,s,t; struct node{int v, ...

  5. url路径去掉两个opencms

    采用刚刚的方法安装OpenCMS之后,站点url中会存在两个opencms,造成访问url路径过长,下面讲解一种去掉两个opencms的方法. 1.去掉第一个opencms 安装时采用ROOT安装,即 ...

  6. 《android开发艺术探索》读书笔记（七）--动画

    接上篇<android开发艺术探索>读书笔记(六)--Drawable No1: 自定义动画:派生一种新动画只需要继承Animation这个抽象类,然后重写它的initialize和app ...

  7. SpringBoot+gradle+idea实现热部署和热加载

    前言 因为之前使用myeclipes的同学就知道,在使用myeclipes的时候,java文件或者jsp文件写完之后会被直接热加载到部署的容器中,从而在开发的时候,不同经常去重启项目,从而达到了增加开 ...

  8. mysql varchar vs oracle varchar2

    1.错误提示: mysql的Data truncation: Data too long for column 'path' at row 1 错误原因: 1.字段过长而导致出错的, 2. 可能是因为 ...

  9. OJ的初步了解

    注意源文件的注释可能跟题目不一样. 注意工程文件已有主函数. 注意输出结果还是返回值. 注意带参数的方法不用手动输入. 注意提交的次数的正确率会计入编程能力.

  10. Git 用户名和邮箱

    用户名邮箱的作用 用户名和邮箱地址是本地git客户端的一个变量,不随git库而改变. 每次commit都会用用户名和邮箱纪录. github的contributions统计就是按邮箱来统计的. 查看用 ...