JQuery浮动层,自己随手写的一个

阅读更多

首先是jsp页面,主要是一个按钮+2个DIV层，其中一个层是用来全窗口遮罩，另一个层是浮动出来显示数据,如下：

<%@ page contentType="text/html;charset=UTF-8" %>



  
    
	
	
	    
	
	

	[color=red]
               
  
  
  
  	

         

        浮动
  

接着是jqeury自定义方法，如下：

/**
 * 		   Author: caojianwei															   
 * 			 Date: 2010-07-08 15:07														   	
 * 	    UseSample: $("#ceshibutton1").floatdiv("fullceshi","ceshi",0.9,0.75,function(){}); 
 * Page Must have: 
						   
**/

//自定义浮动层，关闭层双击弹出层即可
jQuery.fn.floatdiv = function(fullDivID,	    //占满窗口的透明层
	        				  divID,		    //弹出层的ID
	        				  divWidthScale, 	//弹出层宽比例 0~1
	        				  divHeightScale,	//弹出层高比例 0~1
	        				  callfn){       	//弹出层完成后需要执行的函数
  		var pagewidth = $(window).width();
  		var pageheight = $(window).height();
  		
  		//弹出窗口的宽高不能超过父窗口的宽高
  		var widthScale = pagewidth*divWidthScale;
  		var heightScale = pageheight*divHeightScale;
  		
  		$("#"+divID).width(widthScale>pagewidth?pagewidth:widthScale);
  		$("#"+divID).height(heightScale>pageheight?pageheight:heightScale);
  		
  		//设置弹出窗口的宽高,及弹出的位置
  		var divwidth = $("#"+divID).width();
  		var divheight = $("#"+divID).height();
  		var divleft = (pagewidth-divwidth)/2;
  		var divtop = (pageheight-divheight)/2;
  		
  		//全屏遮罩层设置
  		function oprationFullDiv(){
  			//先使用层遮罩住全部窗口
 			$("#"+fullDivID).css("position","absolute");
 			$("#"+fullDivID).css("left",0);
 			$("#"+fullDivID).css("top",0);
 			$("#"+fullDivID).css("width",pagewidth);
 			$("#"+fullDivID).css("height",pageheight);
 			$("#"+fullDivID).css("background-color","#EAEAEA");
  			$("#"+fullDivID).show();
  			//遮罩层完毕后显示数据窗口
  			$("#"+fullDivID).fadeTo("slow",0.6,function(){
 				windowDiv();
  			});
  		}
  		
  		//窗口遮罩层设置
  		function windowDiv(){
  			$("#"+divID).css("position","absolute");
  			$("#"+divID).css("left",divleft);
  			$("#"+divID).css("top",divtop);
  			$("#"+divID).css("width",divwidth);
  			$("#"+divID).css("height",divheight);
  			$("#"+divID).css("background-color","#FFFFFF");
  			$("#"+divID).css("overflow","auto");
  			$("#"+divID).show();
  			//数据窗口显示完成,加载数据
			$("#"+divID).fadeTo("slow",1,function(){
 				if(callfn!=null){
			  		var CallParams = {};
			  		CallParams.success = callfn;
			  		$.ajax(CallParams);
	  			}
			});
  		}
  		//加载
  		$(document).ready(function(){
  			//双击浮动窗口 关闭浮动窗口
	  		$("#"+divID).dblclick(function(){
	  			$("#"+divID).fadeOut("slow",function(){
	  				$("#"+divID).hide("fast",function(){
	  					$("#"+fullDivID).hide();
	  				});
	  			});
	  		});
	  			 		
	 		//单击浮动窗口外的地方则将浮动窗口关闭
	 		$("#"+fullDivID).click(function(){
	 			$("#"+divID).fadeOut("slow",function(){
	  				$("#"+divID).hide("fast",function(){
	  					$("#"+fullDivID).hide();
	  				});
	  			});
	 		});
  		});
  		
  		//为传入符合id的元素绑定click事件
  		$(this).bind('click',function(){
  			oprationFullDiv();
  		});
  		alert('1');
	};

至于为什么要写2个div，主要是由于在使用javascript脚本动态增加一个div时无法控制这个div不被外层的div包含进去，这样这个内层的div总是被外层的div覆盖着，暂时没想到好的方法.