让ThickBox拖动起来~~

由于一开始就使用ThickBox作为弹出框,每一次看它不能拖动就有点不舒服~~

上网搜了一通没有解决方案,虽然用jquery.ui的拖动可以解决,但杀鸡何必用牛刀呢

终于在被墙的GOOGLE 里找到了:http://code.google.com/p/jquery-drag-and-drop/

代码也就在100行之内,正合哥的意思~~正式开始整合:

1、先引入jquery.dragndrop.js,然后再引入thickbox.js,thickbox.css

2、把thickbox.css中#TB_window 的属性top:50%;left:50%去掉。

3、在thickbox.js第217行,即$("#TB_closeWindowButton").click(tb_remove);的上面添加一行:
     $('#TB_window').Drags({handler: '.drag',zIndex:200,opacity:.9});
4、给thickbox.js中ID=TB_title的DIV加上一个class='drag'。

5、在thickbox.js中的tb_position()修改为:

function tb_position() {
	//Bug Fixed IE6升级到IE7,8时的userAgent同时有IE6,IE7两个值的问题
	var userAgent = navigator.userAgent.toLowerCase();
 	if(jQuery.browser.msie){
		var isIe8 = /msie 8.0/.test(userAgent);
		if(isIe8){
			jQuery.browser.version=8;
		}
 	}
  	var de = document.documentElement;
 	var w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
	var h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
   $("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH /2 ),10) + 'px', width: TB_WIDTH + 'px'});
	if ( !(jQuery.browser.msie && jQuery.browser.version < 7)) { // take away IE6
		$("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT/2),10) + 'px'});
	}
 	$("#TB_window").css("left",parseInt(w/2) + "px");
 	$("#TB_window").css("top",parseInt(h/2) + "px");
}

你可能感兴趣的:(让ThickBox拖动起来~~)