jQuery模态对话框和CKEditor输入对话框

解决方案更新

花费一些时间搜索后,我想我可以解决这个问题.对我来说,使用模态对话框的唯一功能是阻止对其后面的元素进行访问.我发现它与使用非模态对话框一样,覆盖了它.覆盖层只是做了一个模态对话的手段(由于它不是全功能模态).

所以这是我的解决方案,在我初始化对话框之前,我在它之前插入一个div元素,并向div提供ui-widget-overlay类.它使用.insertBefore()方法.然后,在对话框“关闭”事件中,我删除该重叠div.对话框“modal”选项设置为false.通过使用此解决方案,CKEditor弹出工作正常,因为只有一个模态对话框(CKEditor弹出).

这是jsfiddle的整个代码.希望这有帮助.

我使用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输入对话框.有没有人可以帮助我？

解决方法

最近,(这个通过周),我遇到了类似的问题.我正在做你所提供的jsfiddle中所做的一切.然而,经过一些研究,并且在对话UI代码中发生了什么,以及页面中的标记发生了什么,我终于明白了我需要做什么.

这是关于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对话框.

Working jsFiddle Demo

参考点：

jQuery Dialog UI _allowInteraction

jQuery UI Widget Factory

jQuery模态对话框和CKEditor输入对话框

解决方法

相关推荐