实现页面弹出框

来源：互联网发布：阿里云香港如何使用cdn 编辑：程序博客网时间：2024/04/27 13:33

权限系统分到的任务是:分栏和页面弹出框,开始感觉这两个任务都不难,因为在jQuery的视频中讲到过,所以找到了之前自己完成的实例脑补了一下,分栏的确是比较简单的,那么就来说一下关于页面弹出框的问题吧.

开始没多想,就简单的根据实例完成了自己需要的弹出框(达到的效果：点击按钮在页面中间弹出框，并且弹出框可以根据浏览器的大小而改变位置，始终保持在页面中间显示)

html：

<!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>窗口显示-陈丽娜</title><link rel="stylesheet" type="text/css" href="css/window.css"><script type="text/javascript" src='js/jquery.js'></script><script type="text/javascript" src='js/window-2.js'></script></head><body>       <!-- ///* <input type="button" value="左下角显示窗口" id="leftpop"/>*/-->      <input type="button" value="弹窗" id="conterpop"/>    </p>    <div class="window" id="center">    <div class="title">    添加模块  <img src="image/close.gif" alt="关闭" /></div><div class="content">       <table class="pageFormContent" >                                <tr class="dialogContent" >                    <td class="dialoglable">模块名称：</td>                    <td ><input name="md" type="text" size="30" /></td>                </tr>                <tr>                    <td class="dialoglable">所属模块：</td>                    <td >                        <select name="model" class="required combox">                        <option value ="">请选择</option>                       </select>                    </td>                                        </tr>                <tr><td class="dialoglable">英文标识：</td>                    <td >                        <input name="mdId" type="text" size="30" />                    </td>                </tr>                  <tr><td class="dialoglable">排序号：</td>                    <td><input name="LevelId" type="text" size="30" /></td>                </tr>                 <tr><td class="dialoglable">关联组织：</td>                    <td >                        <select name="orgName" class="required combox">                        <option value ="">请选择</option>                        </select>                    </td>                </tr>                 <tr><td class="dialoglable">所属类型：</td>                     <td >                    <select name="typeName" class="required combox">                        <option value ="">请选择</option>                    </select>                     </td>                </tr>                <tr><td class="dialoglable">描述：</td>                    <td >                    <textarea rows="5"  name="remark" style="width: 295px" ></textarea>                    </td>                </tr>                 <tr class="bar">                    <td colspan="2" class="dialogBar">                        <input id="button" type="button" value="保存" class="dialogbutton"  />                        <input id="Reset1" type="reset" value="重置" class="dialogbutton"/>                        <input id="dialogcancel" type="submit" value="取消" class="dialogbutton"/>                    </td>                                    </tr>                          </table></div></div><body></html>

css:

.window{background-color: #99FFCC;width:430px;margin:5px;padding:2px;/*位置绝对定位*/ position:absolute;left: 277px;top: 491px;display:none;}.content{      height:360px;  background-color:#FFFFFF;  border:2px solid  #99FFCC;  /*滚动条显示*/  overflow:auto;  clear:both;} .title img{      float:right;  cursor:pointer; }.title{   padding:2px;     }

js:

// JavaScript Document$(document).ready(function(){//1点击按钮可以再屏幕中间显示一个窗口//2点击按钮2可以再屏幕左下角显示一个窗口//3页面加载完成后再屏幕右下角飘一个窗口，吗并且窗口慢慢淡出//点击关闭按钮，窗体关闭/*$(".title img").click(function(){$(this).parent().parent().hide("slow");});*/var centerwin=$("#center").mywin({left:"center",top:"center"});/*var leftwin=$("#left").mywin({left:"left",top:"bottom"},function(){leftwin.slideUp("slow");});*/$("#conterpop").click(function(){   //鼠标点击按钮之后，把id为center的窗口显示在页面中间   //计算位于屏幕中间的窗口的左边界和上边界的值   //浏览器可视区的宽和高，当前窗口的宽和高   //考虑滚动条的上下左右边界问题   //如何获得滚动条的边界值    centerwin.show("slow");}); });///封装插件  $.fn.mywin=function(position, hidefunc){if(position && position instanceof Object){var positionleft=position.left;var positiontop=position.top;var windowobj=$(window);var currentwin=this;var cwinwidth=this.outerWidth(true);var cwinheight=this.outerHeight(true);var left;var top;var scrollleft;var scrolltop;var browserwidth;var browserheight;//计算浏览器当前可是区域的宽和高，以及滚动条左上边界function getWinDin(){ scrollleft=$(window).scrollLeft(); scrolltop=$(window).scrollTop(); browserwidth=$(window).width(); browserheight=$(window).height();}//计算窗口真的左边界的值function calLeft(positionleft,scrollleft,browserwidth,cwinwidth){if(positionleft && typeof positionleft=="string"){if(positionleft=="center"){left=scrollleft+(browserwidth-cwinwidth)/2;}else if(positionleft=="left"){left=scrollleft;}else if(positionleft=="right"){left=scrollleft+browserwidth-cwinwidth;}}//缓存数据currentwin.data("positionleft",positionleft);}//计算窗口真实的上边界值function callTop(positiontop,scrolltop,browserheight,cwinheight){if(positiontop && typeof positiontop=="string"){if(positiontop=="center"){    top=scrolltop+(browserheight-cwinheight)/2;}else if(positiontop=="top"){top=scrolltop;}else if(positiontop=="bottom"){top=scrolltop+browserheight-cwinheight;}}//缓存数据currentwin.data("positiontop",positiontop);}//窗体位置改变function moveWin(){calLeft(currentwin.data("positionleft"),scrollleft,browserwidth,cwinwidth);callTop(currentwin.data("positiontop"),scrolltop,browserheight,cwinheight);currentwin.animate({left:left,top:top},300);  }//浏览器滚动条滚动时，移动窗口的位置var scrollTimeout;$(window).scroll(function(){clearTimeout(scrollTimeout);scrollTimeout=setTimeout(function(){getWinDin();moveWin(); },300);});//浏览器大小改变时，移动窗口的位置$(window).resize(function(){getWinDin();moveWin();});    //关闭弹出框currentwin.children(".title").children("img").click(function(){    if(!hidefunc){currentwin.hide("slow");}else{hidefunc();} });getWinDin();calLeft(positionleft,scrollleft,browserwidth,cwinwidth);callTop(positiontop,scrolltop,browserheight,cwinheight);currentwin.css("left",left).css("top",top);//返回当前对象，以便于可以级联的执行其他方法return this;}}

然而这个弹出框是实现了，但是弹出框并不能跟随着鼠标的移动而移动，为了用户体验性更好，所以要求进行改变，在上面实例的基础上做修改是没办法完成的，因为已经固定弹出框是在页面中间显示了，所以查了一些其他的方法，其中一个比较简单的方法就是利用jquery ui封装好的dialog方法：

html:基本和上一个的html是一样的，只是改变一下div的类名：

<!doctype html><html lang="en"><head><meta charset="gbk" />  <title>jQuery UI Dialog - Default functionality</title>  <link rel="stylesheet" href="./css/jquery-ui.css" />  <script src="./js/jquery-1.9.1.js"></script>  <script src="./js/jquery-ui.js"></script>  <link rel="stylesheet" href="./css/style.css" />  <script type="text/javascript">    function dialogOpen()  {      $(function () {          $("#dialog").dialog();      });  }  </script></head><body>    <input type="button" id="btnAdd" value="弹窗" onClick="dialogOpen();" /><div id="dialog" title="添加模块" style="display:none">     table部分省略       </div> </body></html>

只需要引用juqery ui封装好的js和css就可以完成弹出框，然而不是很满意的地方就是这个弹出框的效果图：

标题的背景图是灰色与整个系统并不协调，所以需要改正，一种方法是去jquery ui的官网去下载皮肤，由于我的英文不是很好没有找到下载地址，看来还要好好学英语要；另一种方法就是修改jquery ui的css，在代码调试窗口查清楚标题栏的类名，在jquerycss中进行背景色的调整即可完成。

这两种实现方法一个比较原始，是自己通过js敲出来的，一个是用封装好的方法，两种方法实现的效果虽然太相同，但是也大同小异。其实第一中方法也可以封装成一个js，在以后需要的时候调用即可。

虽然都不是什么难点，但是一步一步的实现还是花费了我一段时间的，不过以后遇到这个就不用再担心了。

1 0