jQuery弹出窗口完整代码

效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

  2 <html xmlns="http://www.w3.org/1999/xhtml"> 

  3 <head> 

  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

  5 <title>jQuery弹出窗口 - 计划-博客园</title> 

  6 <meta name="keywords" content="www.cnblogs.com/jihua"/>

  7 <style type="text/css"> 

  8 .window{ 

  9     width:250px; 

 10     background-color:#d0def0; 

 11     position:absolute; 

 12     padding:2px; 

 13     margin:5px; 

 14     display:none; 

 15     } 

 16 .content{ 

 17     height:150px; 

 18     background-color:#FFF; 

 19     font-size:14px; 

 20     overflow:auto; 

 21     } 

 22     .title{ 

 23         padding:2px; 

 24         color:#0CF; 

 25         font-size:14px; 

 26         } 

 27 .title img{ 

 28         float:right; 

 29         } 

 30 </style> 

 31 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

 32 <script type="text/javascript" language="javascript">

 33     $(document).ready(function () {

 34         $("#btn_center").click(function () {

 35             popCenterWindow();

 36         });

 37 

 38         $("#btn_right").click(function () {

 39             popRightWindow();

 40         });

 41         $("#btn_left").click(function () {

 42             popLeftWindow();

 43         });

 44 

 45     }); 

 46  

 47 </script> 

 48 </head> 

 49 <body>

 50  <div style="width:600px;margin-left:auto;margin-right:auto;margin-top:160px;">

 51 <input type="button" value="居中窗口" id="btn_center" /> 

 52 <input type="button" value="居左下角" id="btn_left" /> 

 53 <input type="button" value="居右下角" id="btn_right" /> 

 54 </div>

 55    <div class="window" id="center"> 

 56 <div id="title" class="title"><img src="http://pic002.cnblogs.com/images/2012/451207/2012100814082487.jpg" alt="关闭" />计划 博客园-居中窗口</div> 

 57 <div class="content">jihua.cnblogs.com</div> 

 58    </div> 

 59     

 60   <div class="window" id="left"> 

 61 <div id="title2" class="title"><img src="http://pic002.cnblogs.com/images/2012/451207/2012100814082487.jpg" alt="关闭" />计划 博客园-居左窗口</div> 

 62 <div class="content">jihua.cnblogs.com</div> 

 63   </div> 

 64   <div class="window" id="right"> 

 65 <div id="title3" class="title"><img src="http://pic002.cnblogs.com/images/2012/451207/2012100814082487.jpg" alt="关闭" />计划 博客园-居右窗口</div> 

 66 <div class="content">jihua.cnblogs.com</div> 

 67   </div>

 68   <script type="text/javascript">

 69   //获取窗口的高度 

 70 var windowHeight; 

 71 //获取窗口的宽度 

 72 var windowWidth; 

 73 //获取弹窗的宽度 

 74 var popWidth; 

 75 //获取弹窗高度 

 76 var popHeight; 

 77 function init(){ 

 78    windowHeight=$(window).height(); 

 79    windowWidth=$(window).width(); 

 80    popHeight=$(".window").height(); 

 81    popWidth=$(".window").width(); 

 82 } 

 83 //关闭窗口的方法 

 84 function closeWindow(){ 

 85     $(".title img").click(function(){ 

 86         $(this).parent().parent().hide("slow"); 

 87         }); 

 88     } 

 89     //定义弹出居中窗口的方法 

 90     function popCenterWindow(){ 

 91         init(); 

 92         //计算弹出窗口的左上角Y的偏移量 

 93     var popY=(windowHeight-popHeight)/2; 

 94     var popX=(windowWidth-popWidth)/2; 

 95     //alert('jihua.cnblogs.com'); 

 96     //设定窗口的位置 

 97     $("#center").css("top",popY).css("left",popX).slideToggle("slow");  

 98     closeWindow(); 

 99     } 

100     function popLeftWindow(){ 

101         init(); 

102         //计算弹出窗口的左上角Y的偏移量 

103     var popY=windowHeight-popHeight; 

104     //var popX=-(windowWidth-popWidth); 

105     //alert(popY); 

106     //设定窗口的位置 

107     $("#left").css("top",popY-50).css("left",50).slideToggle("slow"); 

108     closeWindow(); 

109     } 

110     function popRightWindow(){ 

111         init(); 

112         //计算弹出窗口的左上角Y的偏移量 

113     var popY=windowHeight-popHeight; 

114     var popX=windowWidth-popWidth; 

115     //alert(www.cnblogs.com/jihua); 

116     //设定窗口的位置 

117     $("#right").css("top",popY-50).css("left",popX-50).slideToggle("slow"); 

118     closeWindow(); 

119     } </script> 

120 </body> 

121 </html> 

 

 web前端汇总 :http://www.cnblogs.com/jihua/p/webfront.html

你可能感兴趣的:(jquery)