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. Android Studio,使用外部模拟器作为生成app调试的模拟器

    本文作为一个原理探究的存在. 1.作者观察发现,逍遥和夜神模拟器自身,都是有一个adb.exe和nox_adb.exe存在的,这个东西是干嘛用的呢. 应该是和本身模拟器进行通信的,我测试可以通过他们自 ...

  2. shared_ptr模版推导的问题

    问题描述 今天在帮同事解决问题时,发现了这个比较有意思的现象,特记录下来备忘. 问题是这样的,同事开发的是应用程序动态库模块,通过应用的框架中以接口方式供外部使用.然后他想对这些接口生命周期进行控制, ...

  3. C语言头文件中定义全局变量导致重复定义错误

    合作方升级SDK后,程序编译出现变量重复定义的错误,通过错误提示无法找到什么位置重复定义了,但确定是引入新SDK后才出现的错误,从SDK的头文件中查找,最终发现在头文件中定义了全局变量 我们的项目在多 ...

  4. docker dead but pid file exists

    CentOS 6安装docker 报docker dead but pid file exists 执行 yum install epel-release yum install docker-io ...

  5. mac 查看某个文件夹下所有隐藏文件(夹)的大小

    du -d 1 -h 对应Linux的命令是: du -ah --max-depth=1

  6. PHPUnit-附录 A. 断言 (assert)

    [http://www.phpunit.cn/manual/5.7/zh_cn/appendixes.assertions.html] 本附录列举可用的各种断言方法. assertArrayHasKe ...

  7. CentOS7 修改网卡名称为eth0

    前言 无论是RHEL 7.还是CentOS 7都使用了NetworkManager.service来进行网络管理,当然network服务还是可以继续使用的,但也将会是过渡期的残留品了. 除此之外7版本 ...

  8. 浅谈PHP答题卡识别（一）

    最近期末考试考完了,我们也要放寒假了.于是突发奇想,想用PHP写一个答题卡识别程序.已经实现了一些,现分享给大家. 具体的步骤如下: 上传答题卡=>图片二值化(已实现)=>寻找定位点(已实 ...

  9. Shell 编程入门

    首先创建一个文件: 在终端中输入如下命令: vi helloworld.sh 然后按i进行命令编写 下面这句话是必须写的 #!/bin/sh这句话是必须写的 #!/bin/sh a="hel ...

  10. Nginx的gzip压缩的原理和设置参数

    开启Nginx gzip压缩非常简单,达到的效果可以压缩静态文件大小.提高页面访问速度.节省流量和带宽是很有帮助的,也为用户省去了很多流量:唯一的不足就是开启之后服务器这边会增加运算,进行压缩运算处理 ...