解决jquery ui dialog 嵌入iframe时，resize动作过快时的bug

大家都知道，jquery ui dialog默认不支持iframe的，想使用可以用如下方法：

$('#dialog').html('<iframe src="http://www.sohu.com"  width="100%" height="100%"></iframe>');

但是在拖拽改变大小时，如果鼠标移动过快，就会卡住，原因是鼠标事件移动到iframe里面去了，
解决的方法，是在拖拽开始时，创建一个div（透明的），覆盖住iframe，拖拽结束后，remove次iframe即可

我修改的是jquery.ui.resizable.js这个文件

创建div代码

el.find("iframe").each(function(){  
				  
				var $dialog = $(this).parent().parent();  
				var $div = $('<div id="_iframe_p_" style="background-color:red;position:absolute;width:100%;height:100%;z-index:9999999"></div>')
				$div.fadeTo(0); 
				$div.appendTo(el);
				$div.css("left",0) ;
				$div.css("top",0) ;
				
		 });  

移除div

this.element.find("#_iframe_p_").remove();

大家可以下载到本地，覆盖原来的jquery.ui.resizable.js

评论

1 楼 yayoho 2012-10-02  

哥哥些能不能解决一下。移动的时候也存在这个bug，怎么修改