1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="scripts/jquery-1.9.1.min.js"></script> 6 <title>JQuery小技巧--在浏览器中央显示控件</title> 7 8 <script> 9 $(document).ready(function(e) { 10 $("#div_center").hide();//隐藏这个控件 11 $.fn.center=function(){ 12 this.css("position","absolute");//定义显示方式为绝对位置 13 $(this).css("height",200); 14 $(this).css("width",200); 15 $(this).css("background-color","green"); 16 //浏览器高宽-控件高宽/2 就是控件上边距与左边距的坐标定位 17 this.css("top",( window.innerHeight-this.height())/2+$(window).scrollTop()+"px"); 18 this.css("left",( window.innerWidth-this.width())/2+$(window).scrollLeft()+"px"); 19 return $(this); 20 }; 21 $("#btn_display").click(function(e) { 22 $("#div_center").show(); 23 $("#div_center").center(); 24 }); 25 }); 26 </script> 27 </head> 28 <body> 29 <div id="div_center" hidden="false" >隐藏div</div> 30 <button id="btn_display">显示</button> 31 </body> 32 </html>
4265
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
