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> <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.效果圖
