Jquery弹出层,背景变暗 居中

来源:互联网 发布:java.util.map 编辑:程序博客网 时间:2024/07/24 01:50
<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>


原创粉丝点击