首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

jquery 正中弹框

2014-01-17 
jquery 居中弹框!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR

jquery 居中弹框

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title> pop window </title>  <style type="text/css">.popup {    display: none;    background: #333;    padding: 10px;    border: 2px solid #ddd;    position: fixed;    top: 50%;    left: 50%;    width:200px;    height:100px;    z-index: 99999;}  </style>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> </head> <body style="width:798px;height:1900px;border:1px solid red;margin:auto"> <button id="btn" style="float: left;width: 50px;margin-top: 500px;">click</button><div class='popup'>11</div> </body> <script type="text/javascript" >$('#btn').click(function() {$(".popup").fadeIn(300);var popMargTop = $(".popup").height() / 2; var popMargLeft = $(".popup").width() / 2; $(".popup").css({ 'margin-top' : -popMargTop,'margin-left' : -popMargLeft});return false;});$(".popup").click(function(){$(this).fadeOut(300);return false;}); </script></html>

热点排行