实现页面弹出框 - JAVA

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的类名：



	
  
  jQuery UI Dialog - Default functionality
  
  
  <script src="./js/jquery-1.9.1.js">
  <script src="./js/jquery-ui.js">
  
  
  <script type="text/java script">
  
  function dialogOpen()
  {
      $(function () {
          $("#dialog").dialog();
      });
  }
  


    

  
   
     table部分省略

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

旯牝 … http://www.2cto.com/soft 下载皮肤，由于我的英文不是很好没有找到下载地址，看来还要好好学英语要；另一种方法就是修改jquery ui的css，在代码调试窗口查清楚标题栏的类名，在jquerycss中进行背景色的调整即可完成。

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

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

实现页面弹出框(二)