zoukankan
html css js c++ java
js弹窗登录效果(源码)--web前端
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*/
100%;height: 100%;position: fixed;left: 0;top: 0;display: none}
#login{ 600px;height: 350px;background: white;position: fixed;display: none}
#login #title{color: white;background: #ff9933; 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{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> <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>密 码:<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
查看全文
相关阅读:
nodeJS入门01-http模块
nodeJS入门-Buffer对象
php与MySQL(php内置mysql函数)
php与MySQL(基本操作)
log4net
js验证小数类型(浮点数)和整数类型
牛腩学ASP.NET CORE做博客视频
opencv再学习之路(八)---设定感兴趣区域(RIO)
opencv再学习之路(四)---色彩分割得到二值图像
opencv再学习之路(三)---形态学操作
原文地址:https://www.cnblogs.com/qikeyishu/p/7234077.html
最新文章
$_FILES数组详解
表单传值的方式
文件上传相关问题
搭建PHP开发环境(五)-虚拟主机
js获取HTTP的请求头信息
时间戳与标准时间的相互转换
git的操作集合
vue 中的translation操作----动态值
浏览器的工作原理
JS中小数相加相减时出现很长的小数点的解决方式
热门文章
JS遍历数组的操作(map、forEach、filter等)
vue组件化的应用
封装ajax,让调用变得简单优化
sessionStorage数组、对象的存储和读取
mui带参数返回
layer弹窗内容显示不全的解决方法
nodeJS入门04-Express路由和中间件
nodeJS入门04-post请求
nodeJS入门03-模块
nodeJS入门02-文件系统模块
Copyright © 2011-2022 走看看