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

Question

解决方案更新

花了一些时间搜索后,我想我可以解决这个问题.对我来说,使用模态对话框的唯一功能是它阻止从它后面的元素进行访问.我发现它与使用背后叠加的非模态对话框一样.叠加只是做了一个模态对话的技巧(尽管它没有完全特色的模态).

所以这是我的解决方案,在初始化对话框之前,我在它之前插入一个div元素,并给div提供ui-widget-overlay类.它使用.insertBefore()方法完成.然后,在对话框' close '事件中,我删除了覆盖div.对话框" 模态 "选项设置为false.通过使用此解决方案,CKEditor弹出工作正常,因为只有一个模式对话框(CKEditor弹出).

这是jsfiddle中的完整代码.希望这可以帮助.

---

---

我正在使用jQuery来显示一个对话框.我将此对话框设置为模态模式.在该对话框中,我包含一个textarea,然后将与CKEditor一起使用.当我显示对话框时,CKEditor很好地转换了textarea.但是当尝试包含图像时(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,
    height: 630,
    width: 'auto',
    maxHeight: 630,
    resize: 'auto',
    modal: false
});

使用该代码,一切正常,我可以单击文本框并键入.

---

因为我需要启用模态模式,这就成了我的问题.我认为这是因为jQuery对话框中的z-index(或类似的)阻止了CKEditor输入对话框.有没有人可以帮助我？

Answer 1

最近，（就在这周），我遇到了类似的问题。我将完全按照您在提供的 jsfiddle 中所做的操作。然而，经过一些研究并尝试了对话框 UI 代码中发生的情况以及页面中标记发生的情况，我终于明白了我需要做什么。

这都是关于小部件工厂和_allowInteraction函数的。

对我来说，我在 jQuery 对话框中使用带有过滤器的 Sencha ExtJs 网格。网格工作正常，但过滤器（文本框过滤器）不起作用。这是因为当显示过滤器时，它们位于对话框 div 或 .ui-dialog 标记之外。

如果您深入研究_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' , $.ui.dialog, function(){}); 它适用于我们网站的所有用户界面对话框。

工作 jsFiddle 演示

参考点：

jQuery 对话框 UI _allowInteraction

jQuery UI 小部件工厂