代码描述:jquery弹出居中窗口。jquery弹出居中窗口效果代码实例
点击一个按钮弹出一个窗口效果在各种网站都有应用,本章节不单单介绍弹出居中窗口的效果,而且还有居左和居右效果,下面先看代码实例:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <head> <title>jquery实现的弹出窗口效果-51前端</title> <style type="text/css"> .window{ width:250px; background-color:#d0def0; position:absolute; padding:2px; margin:5px; display:none; } .content{ height:150px; background-color:#FFF; font-size:14px; overflow:auto; } .title{ padding:2px; color:#0CF; font-size:14px; } .title img{ float:right; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(document).ready(function (){ $("#btn_center").click(function (){ popCenterWindow(); }) $("#btn_right").click(function (){ popRightWindow(); }) $("#btn_left").click(function (){ popLeftWindow(); }) }) var windowHeight; var windowWidth; var popWidth; var popHeight; function init(){ windowHeight=$(window).height(); windowWidth=$(window).width(); popHeight=$(".window").height(); popWidth=$(".window").width(); } function closeWindow(){ $(".title img").click(function(){ $(this).parent().parent().hide("slow"); }) } function popCenterWindow(){ init(); var popY=(windowHeight-popHeight)/2; var popX=(windowWidth-popWidth)/2; $("#center").css("top",popY).css("left",popX).slideToggle("slow"); closeWindow(); } function popLeftWindow(){ init(); var popY=windowHeight-popHeight; $("#left").css("top",popY-50).css("left",50).slideToggle("slow"); closeWindow(); } function popRightWindow(){ init(); var popY=windowHeight-popHeight; var popX=windowWidth-popWidth; $("#right").css("top",popY-50).css("left",popX-50).slideToggle("slow"); closeWindow(); } </script> </head> <body> <div> <input type="button" value="居中窗口" id="btn_center" /> <input type="button" value="居左下角" id="btn_left" /> <input type="button" value="居右下角" id="btn_right" /> </div> <div class="window" id="center"> <div id="title" class="title"> <img src="mytest/jQuery/close.jpg" alt="关闭" />居中窗口 </div> <div class="content">51前端</div> </div> <div class="window" id="left"> <div id="title2" class="title"> <img src="mytest/jQuery/close.jpg" alt="关闭" />居左窗口 </div> <div class="content">51前端</div> </div> <div class="window" id="right"> <div id="title3" class="title"> <img src="mytest/jQuery/close.jpg" alt="关闭" />居右窗口 </div> <div class="content">51前端</div> </div> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能