首页 > 代码库 > JQ编写的弹出层
JQ编写的弹出层
<!DOCTYPE html><html> <head> <meta charset=‘utf-8‘> <title>jquery遮罩层效果</title> <link rel="stylesheet" type="text/css" href="css/demo.css"> <script type="text/javascript" src=‘js/jquery-1.9.1.min.js‘></script> <script type="text/javascript" src=‘js/demo.js‘></script> </head> <body> <input id=‘login-btn‘ type=‘button‘ value=‘登录按钮‘ /> <!--登录窗口:Begin--> <div id="divLoginWindow"> <table style="width: 100%;" border="0" cellpadding="2" cellspacing="0"> <tr style="background-color: #e0f3d9; border-bottom: #bfe5b3 solid 2px"> <td style="height: 38px; width: 100px;"> 用户登录 </td> <td> <img src="imgs/close.png" id="closeBtn" align="absmiddle" alt="关闭" title="关闭" /> </td> </tr> <tr> <td colspan="2" style="height: 5px;"> </td> </tr> <tr> <td align="right"> 用户名： </td> <td> <input type=‘text‘ /> </td> </tr> <tr> <td align="right"> 密 码： </td> <td> <input type=‘text‘ /> </td> </tr> <tr> <td align="right"> 验证码： </td> <td> <input type=‘text‘ /> <img src="imgs/code.png" id="imgRndCode" style="vertical-align: middle;" alt="验证码" title="看不清，点击图片更换图片" /> </td> </tr> <tr> <td colspan="2" align="center"> <a onclick="CheckLogin()" id="alogin">登 录</a> <br /> <span id="showMes"></span> </td> </tr> </table> </div> <!--登录窗口:End--> </body></html>
body { /*background: #b6b7bc;*/ font-size: .80em; font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif; margin: 0px; padding: 0px; color: #696969;}td{ height:35px;} /*设置弹出层窗口的大小*/ #divLoginWindow { display: none; position: absolute; width: 400px; height: 210px; border: #bfe5b3 solid 1px; z-index: 200; background: #fff; } #closeBtn { position: absolute; right: 10px; top: 10px; cursor: hand; } /***遮罩层****/ #greybackground { background: #000; display: block; z-index: 100; width: 100%; position: absolute; top: 0; left: 0; } a { cursor:pointer; }
$(function () { var screenwidth, screenheight, mytop, getPosLeft, getPosTop screenwidth = $(window).width(); screenheight = $(window).height(); //获取滚动条距顶部的偏移 mytop = $(document).scrollTop(); //计算弹出层的left getPosLeft = screenwidth / 2 - 200; //计算弹出层的top getPosTop = screenheight / 2 - 150; //css定位弹出层 $("#divLoginWindow").css({ "left": getPosLeft, "top": getPosTop }); //当浏览器窗口大小改变时 $(window).resize(function () { screenwidth = $(window).width(); screenheight = $(window).height(); mytop = $(document).scrollTop(); getPosLeft = screenwidth / 2 - 200; getPosTop = screenheight / 2 - 150; $("#divLoginWindow").css({ "left": getPosLeft, "top": getPosTop + mytop }); }); //当拉动滚动条时，弹出层跟着移动 $(window).scroll(function () { screenwidth = $(window).width(); screenheight = $(window).height(); mytop = $(document).scrollTop(); getPosLeft = screenwidth / 2 - 200; getPosTop = screenheight / 2 - 150; $("#divLoginWindow").css({ "left": getPosLeft, "top": getPosTop + mytop }); }); //点击链接弹出登录窗口 $(‘#login-btn‘).click(function () { $("#divLoginWindow").fadeIn("slow"); //toggle("slow"); $("#txtUserName").focus(); //获取页面文档的高度 var docheight = $(document).height(); //追加一个层，使背景变灰 $("body").append("<div id=‘greybackground‘></div>"); $("#greybackground").css({ "opacity": "0.5", "height": docheight }); return false; }); //点击关闭按钮 $("#closeBtn").click(function () { $("#divLoginWindow").fadeOut("slow",function(){ //删除变灰的层 $("#greybackground").remove(); }); ////hide(); return false; });});
JQ编写的弹出层
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。