<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>弹窗</title> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $(".loginCloseX").click(function(){ $("#loginZhe").fadeOut("slow"); $("#login").fadeOut("slow"); }); $("#showBox").click(function(){ $("#loginZhe").height($(document).height()+"px"); $("#login").css("top", (($(window).height() - $("#login").height()) / 2) + $(document).scrollTop()); $("#login").css("left",($(window).width()-$("#login").width())/2); $("#loginZhe").fadeTo("slow",0.5); $("#login").fadeIn("slow"); }); $(".loginTitle").mousedown(function(a){ var divX = $(this).offset().left; var divY = $(this).offset().top; var jianX = a.pageX-$(this).offset().left; var jianY = a.pageY-$(this).offset().top; $(".loginTitle").mousemove(function(e){ $("#login").css("left",e.pageX-jianX); $("#login").css("top",e.pageY-jianY); }); }); $(".winTitle").mouseup(function(){ $(".winTitle").unbind("mousemove"); }); }); </script> <style type="text/css"> body{ margin:0; padding:0; line-height:1.6; font-size:12px; font-family:Arial, Helvetica, sans-serif; height:100%;} #login{ height:200px; width:400px; position:absolute; top:200px; left:200px; background:#FFF; z-index:2; display:none;} #loginZhe{ background:#000000;filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5; width:100%; height:100%; position:absolute; top:0; left:0; z-index:1; display:none;} .loginBoder{ position:absolute; left:-8px; top:-8px; width:416px; height:216px; background:#CCC;filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5; z-index:-1} .loginTitle{ padding:2px 8px; border-bottom:1px solid #CCC; background:#EBEBEB; z-index:99999;} .loginContent{ background:#FFF; z-index:4; padding:4px; height:168px;} .loginCloseX{ float:right; padding:2px 8px; cursor:pointer; position:absolute; top:0; right:0;font-weight:800; color:#333;} </style> <div id="loginZhe"></div> <a href="#" id="showBox">显示</a> <div id="login"> <div class="loginTitle">这里是标题</div> <div class="loginContent">这里是内容</div> <div class="loginBoder"></div> <div class="loginCloseX">X</div> </div>
Jquery弹出层,背景变暗 居中
最新推荐文章于 2021-06-28 12:40:35 发布