花费一些时间搜索后,我想我可以解决这个问题.对我来说,使用模态对话框的唯一功能是阻止对其后面的元素进行访问.我发现它与使用非模态对话框一样,覆盖了它.覆盖层只是做了一个模态对话的手段(由于它不是全功能模态).
所以这是我的解决方案,在我初始化对话框之前,我在它之前插入一个div元素,并向div提供ui-widget-overlay类.它使用.insertBefore()方法.然后,在对话框“关闭”事件中,我删除该重叠div.对话框“modal”选项设置为false.通过使用此解决方案,CKEditor弹出工作正常,因为只有一个模态对话框(CKEditor弹出).
我使用jQuery来显示一个对话框.我将此对话框设置为模态模式.在该对话框中,我包含一个textarea,然后与CKEditor一起使用.当我显示对话框时,textarea由CKEditor很好地转换.但是当尝试包含图像(CKEditor显示ITS OWN DIALOG作为输入)时,我不能使用URL输入.
这是我的init对话框的代码：
var $dialogJurnal = $("#dialog").dialog({
autoOpen: false,height: 630,width: 'auto',maxHeight: 630,resize: 'auto',modal: true
});
使用该配置,我无法单击文本框并键入.
然后我弄清楚,如果我将模态设置为false,那么它应该工作.
这是代码：
var $dialogJurnal = $("#dialog").dialog({
autoOpen: false,modal: false
});
使用该代码,一切正常,我可以单击文本框并键入.
因为我需要启用模态模式,所以这成为我的问题.我认为它是因为z-index从jQuery对话框(或类似的)阻止CKEditor输入对话框.有没有人可以帮助我？
解决方法
这是关于widget工厂和_allowInteraction函数.
对于我来说,我在jQuery对话框中使用带有过滤器的Sencha ExtJs网格.网格工作正常,但是过滤器(文本框过滤器)将不起作用.这是因为当显示过滤器时,它们不在对话框div或.ui对话框标签之外.
如果您深入到_allowInteraction函数中的对话框UI代码中,则执行以下操作.
//From the jQuery dialog UI
_allowInteraction: function(event) {
if($(event.target).closest('.ui-dialog').length) {
return true;
}
// TODO: Remove hack when datepicker implements
// the .ui-front logic (#8989)
return !!$( event.target ).closest(".ui-datepicker").length;
}
所有我需要做的是在我的jQuery UI文件之后添加一个javascript文件与以下代码：
$.widget('ui.dialog',$.ui.dialog,{
_allowInteraction: function( event ) {
//This overrides the jQuery Dialog UI _allowInteraction to handle the sencha
//extjs filter's not working.
//this._super(event) passes onto the base jQuery UI
return !!$( event.target ).closest( ".x-panel :input" ).length || this._super( event );
}
}
由于_allowInteraction每当焦点从对话框中丢失时,我只需要查找.x-panel：input,因为这是事件触发的.
在你的情况下,你只需要看看CKEditor最接近的元素.这样,您不需要做任何类型的解决方法,您只需将对话框的模态选项设置为true即可.你不想这样做的原因是如果你要显示另一个对话框.你的叠加层可能会被错误或附加到错误的元素上.对话框UI已经有代码来处理.
通过执行$.widget(‘ui.dialog’,function(){});它适用于我们网站的所有ui对话框.
参考点：
