jQuery快顯視窗完整代碼

來源:互聯網
上載者:User

標籤:com   value   asc   init   pos   word   text   javascrip   http   

  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://down.hovertree.com/jquery/jquery-1.7.2.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>

效果體驗:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm

jQuery快顯視窗完整代碼

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.