弹出框的封装-dialog

 

 

 

	
	
var basic = {};
	
	/**
	 * 对话框内 关闭按钮调用  ， 作用关闭对话框
	 */
	basic.closeDialog =  function (){
			var dialog = document.getElementById('dialog');
			var zhezhao = document.getElementById('zhezhao');
			dialog.parentNode.removeChild(dialog );
			zhezhao.parentNode.removeChild(zhezhao );
	}
	 
	/**
	 * ajax 加载的 弹出层
	 * ajax 的形式加载所需要的对话框
	 * width :弹出框的 宽度
	 * height ：弹出框的 高度
	 */
	basic.tanchuCeng = function(url ,width ,height ){
		basic.showBackground();
		 $.ajax({
			   type: "POST",
			   url: url ,
			   success: function(pageHtml ){
				   //创建对话框
				   var diaObj = basic.createDialog(pageHtml ,width ,height);
				   document.body.appendChild( diaObj );
				   
				   //添加动画
				   var pos = basic.getViewData(); 
				   var h = (pos.height-height)/2+pos.scrollTop ; 
			       var dialog = document.getElementById('dialog');
			       basic.scrollDialog(dialog,  h );
			   }
			});
	 }

	/**
	 * 本页面 弹出层
	 * 对话框在页面上 
	 * width :弹出框的 宽度
	 * height ：弹出框的 高度
	 */
	basic.tanchuCengLocal = function( dialogId ,width ,height ){
		basic.showBackground();
		
		//取出对话框副本的html代码 
		var diaLogHtml = $('#'+dialogId ).clone().show().htmlCode();
		 
	   //创建对话框
	   var diaObj = basic.createDialog(  diaLogHtml  ,width ,height);
	   document.body.appendChild( diaObj );
	   
	   //添加动画
	   var pos = basic.getViewData(); 
	   var h = (pos.height-height)/2+pos.scrollTop ; 
       var dialog = document.getElementById('dialog');
       basic.scrollDialog(dialog,  h );
	       
	 }
	
	/**
	 * 创建一个对话框
	 * pageHtml 是对话框的html   
	 * width 对话框的宽度  
	 * heigth 对话框的高度 这两参数决定对话框的显示位置是否正确
	 */
	basic.createDialog=  function ( pageHtml, width ,height  ){
		 var pos = basic.getViewData(); 
		 var dialogDiv = document.createElement('div');
		 dialogDiv.setAttribute('id','dialog');
		 var w = ((pos.width-width)/2  ); //40 滚动条的宽度 
		 var h = (pos.height-height)/2+pos.scrollTop ; 
		  
		 dialogDiv.style.cssText = "position: absolute;z-index:110;left:"+w+"px;top:0px;background:red";
		 dialogDiv.innerHTML = pageHtml ;
		 return dialogDiv;
	 }
	 
	 //显示背景 透明层 
	basic.showBackground= function (){
		 var pos = basic.getViewData(); 
		 var bj = document.createElement('div');
		 bj.setAttribute('id','zhezhao');
		 //alert(pos.scrollTop  );
		 bj.style.cssText="position: absolute;height:"+ (pos.scrollHeight  )+"px;width:"+pos.width+"px;z-index:100;background:#fff;left:0px;top:0px";
		 if(!+"\v1"){
			 bj.style.filter="alpha(opacity=67)";
		 }else{
			 bj.style.cssText +="background:rgba(164,173,183,.65)";		 
		 }
		 document.body.appendChild(bj);
	 }
	 
	 //得到屏幕的宽高 ，以及位置
	basic.getViewData = function (){
		  var position = {};
		  //滚动条的顶部
		  position.scrollTop = window.pageYOffset  //用于FF
	      	 || document.documentElement.scrollTop   // 有w3c说明的
	     	 || document.body.scrollTop    //w3c 为0 
	     	 || 0;
		  
		  var scrollHeight1 =  document.documentElement.scrollHeight   // 有w3c说明的
		  	 || document.body.scrollHeight    //w3c 为0 
		  	 || 0;
		  //整个页面的高度
		  position.scrollHeight = Math.max(scrollHeight1,position.scrollTop );
		  //滚动条左边位置
		  position.scrollLeft = window.pageXOffset 
		  	 || document.documentElement.scrollLeft
		  	 || document.body.scrollLeft
		  	 || 0;
		  //页面宽度
		  position.width = document.documentElement.clientWidth
		  	 || document.body.clientWidth
		  	 || window.innerWidth
		  	 || 0;
		  //页面高度
	 	  position.height = document.documentElement.clientHeight
	 	  	 || document.body.clientHeight
	 	  	 || window.innerHeight ; // 兼容 opera 
	 	  
		  return position;
	 }
	
	//对话框滚动的动画
	basic.scrollDialog= function(moveObj , maxTop){
		//moveObj.style.top = "0px" ;
		var speed = 2 ;
		var top;
		setTimeout(function(){
			//speed = speed*1.5;
			top = Math.max(parseFloat( moveObj.style.top )+ speed, maxTop);
			moveObj.style.top =  top+"px";
			if(top>maxTop){
				return ;
			}else{
				
				setTimeout(arguments.callee,10); 
			}
			
		},10);
		
	} 
	
	//扩展 jquery ，获取jquery对象对应的html  
	$.extend($.prototype, {
		htmlCode:function(){ 
			var div = $('<div>'); 
			this.appendTo(div); 
			return div.html(); 
		}
	 }); 
	 
	 
	 

 

使用

 var url = "tanchu/弹出框.shtml";

 basic.tanchuCeng(url,493,134 );

 basic.showBackground();