实现页面弹出框(一)

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

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

html：

  


  
<script type="text/java script" src='js/jquery.js'>
<script type="text/java script" src='js/window-2.js'>

   
    
  
      
    

    
  

	    
   

     添加模块 
     
   
		
   
 
    
 
     

      
 
       
模块名称：
 
       
 
      
 
      
 
       
所属模块：
 
       
  请选择  
 
      
 
      

       
英文标识：
 
       
  
 
      
 
      

       
排序号：
 
       
 
      
 
      

       
关联组织：
 
       
  请选择  
 
      
 
      

       
所属类型：
 
       
  请选择  
 
      
 
      

       
描述：
 
       
  
 
      
 
      
 
       
    
 
      
 
     
    
 
   
	
  

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;  
   
}

// java script 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: