box.js

jQuery.fn.center = function(scope){
    this.css("position","absolute");
    this.css("top", ($(window).height() - this.outerHeight())/2 + $(window).scrollTop() + "px");
    this.css("left", ($(window).width() - this.outerWidth())/2 + $(window).scrollLeft() + "px");
    return this;
};
jQuery.fn.drag = function(handle){
	var me = $(this);
	var _handle = $(handle, this);
	var _move = false;
	var _x = 0;
	var _y = 0;
	var ww = $(window).width() +  $(window).scrollLeft();
	var wh = $(window).height() +  $(window).scrollTop();
	var w = me.outerWidth();
	var h = me.outerHeight();
	_handle.mousedown(function(e){
		e.stopPropagation();
        _move = true;
        _handle.css('cursor','move');
        _x= e.pageX - me.offset().left;
        _y= e.pageY - me.offset().top;
		$(document).mousemove(function (ev) {
			_handle.mousemove(ev);
		});
    });
	_handle.mouseup(function(){
		_move = false;
        _handle.css('cursor','auto');
	});
	$(document).mouseup(function () {
		$(document).unbind("mousemove");
	});
	_handle.mousemove = function(e){
        if(_move){
            w = me.outerWidth();
            h = me.outerHeight();	
            var x = e.pageX - _x;
            var y = e.pageY - _y;
            x = (x <= 0) ? 0 : x;
            x = (x >= ww - w) ? (ww - w) : x;
            y = (y <= 0) ? 0 : y;
            y = (y >= wh - h) ? (wh - h) : y;
            me.css({position:'absolute',top:y,left:x});
        }
    };
};
$.extend({
	open:function(cfg){
		var state = {top:0,left:0,width:0,height:0,size:'original'};
		var mask = $('<div class=rzy-mask>');
		var wrap_out = $('<div class=wrap_out>');
		var win = $('<div class=rzy-box>');
		mask.hide();
		var header = $('<div class=head>');
		var x = $('<span class=x title=关闭>X</span>');
		var max = $('<span class=max title=最大化>口</span>');
		var bd = $('<div class=body>');
		var foot = $('<div class=foot2>');
		var ok = $('<button>').html('确&nbsp;&nbsp;定');
		var cancel = $('<button>').html('取&nbsp;&nbsp;消');
		var iframe = $("<iframe frameborder=0 width='100%' height='100%'></iframe>");
		if(cfg&&cfg.url){
			var time = '_' + new Date().getTime();
			var url = (cfg.url.indexOf('?')==-1)?(cfg.url + '?' + time):(cfg.url + '&' + time);
			if(cfg&&cfg.ajax){
				
			}else{
				if(cfg&&cfg.data){
					url += '&' + $.param(cfg.data);
				}
				iframe.attr('src', url);	
				iframe.load(function() { 
					//bd.height($(this).contents().height()); 
				});
			}
		}
		var w = parseInt($(window).width() + $(window).scrollLeft());
		var h = parseInt($(window).height() + $(window).scrollTop());
		x.click(function(){
			$(this).parents('div.wrap_out').hide();
			mask.hide();
			$(this).parents('div.wrap_out').remove();
			mask.remove();
			iframe.remove();
			if(cfg&&cfg.close){
				cfg.close();
			}
		});
		max.toggle(function(){
			$(this).text('_').attr('title','恢复');
			var wrap_out = $(this).parents('div.wrap_out');
			iframe.animate({
				width: w - parseInt(wrap_out.css('border-width'))*2,
				height: h - parseInt(wrap_out.css('border-width'))*2 - header.outerHeight()
			});
			var win = $(this).parents('div.rzy-win');
			win.height(h - parseInt(wrap_out.css('border-width'))*2 - parseInt(wrap_out.css('padding'))*2);
			wrap_out.animate({
				top: 0,
				left: 0,
				width: w - parseInt(wrap_out.css('border-width'))*2 - parseInt(wrap_out.css('padding'))*2,
				height: h - parseInt(wrap_out.css('border-width'))*2
			});
		},function(){
			$(this).text('口').attr('title','最大化');
			var wrap_out = $(this).parents('div.wrap_out');
			iframe.animate({
				width: state['width'],
				height: state['height'] - header.outerHeight()
			});
			win.height(state['height']-2);
			wrap_out.animate({
				top: state['top'],
				left: state['left'],
				width: state['width'],
				height: state['height']
			});
		});
		/**wrap_out.dblclick(function() {
			if(state['size']=='max'){
				state['size']='original';
				wrap_out.animate({
					top: state['top'],
					left: state['left'],
					width: state['width'],
					height: state['height']
				});
				win.animate({
					height: state['height']
				});
			}else{
				wrap_out.animate({
					top: 0,
					left: 0,
					width: w - parseInt(wrap_out.css('border-width'))*2 - parseInt(wrap_out.css('padding'))*2,
					height: h - parseInt(wrap_out.css('border-width'))*2 - parseInt(wrap_out.css('padding'))*2
				});
				win.height(h - parseInt(wrap_out.css('border-width'))*2 - parseInt(wrap_out.css('padding'))*2);
				state['size']='max';
			}
		});**/
		foot.append(ok).append(cancel);
		//win.css({zIndex:'11000',position:'absolute'});
		mask.css({zIndex:'1999',position:'absolute'}).css('top',0).css('left',0);
		win.append(header);
		win.append(bd);
		win.append(foot);
		
		mask.width(w).height(h);
		if(cfg&&cfg.width){
			wrap_out.width(cfg.width);
		}else{
			wrap_out.width(350);
		}
		if(cfg&&cfg.height){
			bd.height(cfg.height);
		}else{
			bd.height(100);
		}
		if(cfg&&cfg.title){
			header.text(cfg.title);
		}else{
			header.text('Win');
		}
		header.append(x);
		//header.append(max);
		bd.append(iframe);
		//win.appendTo($('body'));
		mask.appendTo($('body'));
		
		wrap_out.append(win);
		wrap_out.appendTo($('body'));
		wrap_out.drag('.head');
		wrap_out.css("top", ($(window).height() - wrap_out.outerHeight())/2 + $(window).scrollTop() + "px");
		wrap_out.css("left", ($(window).width() - wrap_out.outerWidth())/2 + $(window).scrollLeft() + "px");
		
		//win.drag('.head');
		if(cfg&&cfg.url){
            var time = '_' + new Date().getTime();
            var url = (cfg.url.indexOf('?')==-1)?(cfg.url + '?' + time):(cfg.url + '&' + time);
			if(cfg&&cfg.ajax){
				bd.css('padding', '20px');
				bd.load(url,function(){
					mask.show();
					wrap_out.center().show();
					state['left'] = wrap_out.css('left');
					state['top'] = wrap_out.css('top');
					state['height'] = wrap_out.height();
					state['width'] = wrap_out.width();
					if(cfg&&cfg.before){
						cfg.before();
					}
				});
			}else{
				setTimeout(function(){
					mask.show();
					wrap_out.show();
					wrap_out.css("top", ($(window).height() - wrap_out.outerHeight())/2 + $(window).scrollTop() + "px");
					wrap_out.css("left", ($(window).width() - wrap_out.outerWidth())/2 + $(window).scrollLeft() + "px");
					state['left'] = wrap_out.css('left');
					state['top'] = wrap_out.css('top');
					state['height'] = wrap_out.height();
					state['width'] = wrap_out.width();
				}, 50);
			}
			
		}
		ok.click(function(){
			if(cfg&&cfg.ok){
				cfg.ok(iframe[0].contentWindow);
			}else{
				$(this).parents('div.wrap_out').hide().remove();
				$('div.rzy-mask').hide().remove();
				$(this).parents('div.wrap_out').find('iframe').hide().remove();
			}
		});
		cancel.click(function(){
			$(this).parents('div.wrap_out').hide().remove();
			$('div.rzy-mask').hide().remove();
			$(this).parents('div.wrap_out').find('iframe').hide().remove();
		});
		return iframe;
	},
	close:function(callback){
		$('body').find('div.wrap_out iframe').remove();
		$('body').find('div.wrap_out').hide().remove();
		$('body').find('div.rzy-mask').hide().remove();
		if(callback){
			callback();
		}
	}
});

 

div.rzy-mask {
	background-color: #eee;
	filter: alpha(opacity=60);
	opacity: 0.6;
}

.wrap_out {
	padding: 5px;
	background: #eee;
	position: absolute;
	z-index: 2000;
	left: -9999px;
	border: 0px solid #ccc;
	font: 16px/20px "\5FAE\8F6F\96C5\9ED1",Arial,sans-serif;
}

div.rzy-box {
	border: 1px solid #ccc;
	background: #fff;
	font-size: 12px;
	position: relative;
}

div.rzy-box div.head {
	height: 30px;
	padding: 5px;
	line-height: 32px;
	color: #FFFFFF;
	background-color: #1abc9c;
	font-size: 16px;
	font-weight: bold;
	position: relative;
	border-bottom: 1px solid #ccc;
}

div.rzy-box .x {
	position: absolute;
	top:5px;
	right:8px;
	cursor: pointer;
	font-size: 16px;
	font-weight: bold;
	color: #FFFFFF;
}

div.rzy-box .max {
	position: absolute;
	top:0;
	right:20px;
	cursor: pointer;
}

div.rzy-box .body {
	word-wrap:break-word;
}

div.rzy-box .foot {
	height: 24px;
	background-color: #eee;
	text-align: center;
	border-top: 1px solid #CFCFCF;
	padding: 5px 0;
}

div.rzy-box .foot2 {
	background-color: #fff;
	text-align: right;
	border-top: 0px solid #CFCFCF;
	padding:2px 20px 2px 0;
}

div.rzy-box .foot button {
	background: #1abc9c;
	border: 1px solid;
	color: #fff;
	text-align: center;
	vertical-align: baseline;
	margin: 0 20px;
	cursor: pointer;
	border-color: #1abc9c #bbb #bbb #1abc9c;
	outline: none;
}
div.rzy-box .foot2 button {
	padding: 0 10px;
	height: 30px;
	line-height: 30px;
	border: 1px solid #d1d1d1;
	color: #7e7e7e;
	text-align: center;
	margin: 10px;
	cursor: pointer;
	background-color: #f7f7f7;
	font: 14px/20px "\5FAE\8F6F\96C5\9ED1",Arial,sans-serif;
}