js实现页面弹框效果

来源：互联网发布：linux 进入mysql 编辑：程序博客网时间：2024/04/30 13:13

很多开始学编程的小伙伴都觉得想要给某些功能加一个弹框效果，但是觉得自己做起来有很吃力，今天给大家推荐一个方法，也是无意间在网上看见，觉得不错。废话不多说，我们来开始做吧

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery弹出窗口</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 type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.7.2.min.js"></script><script type="text/javascript" language="javascript">    $(document).ready(function () {        $("#btn_center").click(function () {            popCenterWindow();        });        $("#btn_right").click(function () {            popRightWindow();        });        $("#btn_left").click(function () {            popLeftWindow();        });    }); </script> </head> <body onload=" popRightWindow();"> <div style="width:600px;margin-left:auto;margin-right:auto;margin-top:160px;"><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="http://pic002.cnblogs.com/images/2012/451207/2012100814082487.jpg" alt="关闭" />居中窗口</div> <div class="content">居中窗口。。。</div>    </div>   <div class="window" id="left"> <div id="title2" class="title"><img src="http://pic002.cnblogs.com/images/2012/451207/2012100814082487.jpg" alt="关闭" />居左窗口</div> <div class="content">居左窗口。。。</div>   </div>   <div class="window" id="right"> <div id="title3" class="title"><img src="http://pic002.cnblogs.com/images/2012/451207/2012100814082487.jpg" alt="关闭" />居右窗口</div> <div class="content">居右窗口。。。。</div>   </div>  <script type="text/javascript">  //获取窗口的高度 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();         //计算弹出窗口的左上角Y的偏移量     var popY=(windowHeight-popHeight)/2;     var popX=(windowWidth-popWidth)/2;     //alert('jihua.cnblogs.com');     //设定窗口的位置     $("#center").css("top",popY).css("left",popX).slideToggle("slow");      closeWindow();     }     function popLeftWindow(){         init();         //计算弹出窗口的左上角Y的偏移量     var popY=windowHeight-popHeight;     //var popX=-(windowWidth-popWidth);     //alert(popY);     //设定窗口的位置     $("#left").css("top",popY-50).css("left",50).slideToggle("slow");     closeWindow();     }     function popRightWindow(){         init();         //计算弹出窗口的左上角Y的偏移量     var popY=windowHeight-popHeight;     var popX=windowWidth-popWidth;     //alert(www.cnblogs.com/jihua);     //设定窗口的位置     $("#right").css("top",popY-50).css("left",popX-50).slideToggle("slow");     closeWindow();     } </script> </body> </html>

效果
这里写图片描述

阅读全文

0 0