jQuery modal dialog and CKEditor input dialog

Question

SOLUTION UPDATE

After spending sometime searching, I think I can make a workaround of this. For me, the only feature of using a modal dialog is that it prevent access from elements behind it. I figure out that its just as same as using non-modal dialog with overlay behind it. The overlay just did the trick of being a modal dialog (altough its not fully featured modal).

So this is my solution, before I initialize the dialog, I insert a div element before it and give ui-widget-overlay class to the div. Its done using .insertBefore() method. And then, at the dialog 'close' event, I remove that overlay div. The dialog 'modal' option is set to false. By using this solution, CKEditor pop up is working fine, because there only one modal dialog (CKEditor pop up).

Here is the whole code in jsfiddle. Hope this helps.

---

---

I'm using jQuery to display a dialog. I set this dialog to modal mode. Inside that dialog I include a textarea, which then will be used with CKEditor. When I show the dialog, the textarea is converted nicely by CKEditor. But when try to include an image (CKEditor displays ITS OWN DIALOG for the input), I cannot use the URL input.

This is my code for init the dialog:

var $dialogJurnal = $("#dialog").dialog({
    autoOpen: false,
    height: 630,
    width: 'auto',
    maxHeight: 630,
    resize: 'auto',
    modal: true
});

With that configuration, I can't click the textbox and type.

---

And then I figure out, that if I set the modal to false, then it should work.

This is the code:

var $dialogJurnal = $("#dialog").dialog({
    autoOpen: false,
    height: 630,
    width: 'auto',
    maxHeight: 630,
    resize: 'auto',
    modal: false
});

With that code, everything is normal, I can click to textbox and type.

---

Because I need to enable the modal mode, then this become my problem. I think its because the z-index from jQuery dialog (or similar to that) that blocks the CKEditor input dialog. Is there any one can help me?

Answer 1

Recently, (just this pass week), I was running into a similar problem. I was going to do exactly what you did in the jsfiddle you provided. However, after some research and playing around with what happens in the dialog UI code and what was going on with the markup in the page I finally understood what I needed to do.

It's all about the widget factory and the _allowInteraction function.

For me I was using the Sencha ExtJs grid with filter in a jQuery dialog. The grid worked fine, but the filters, (the textbox filter), just wouldn't work. This was because when the filters are displayed they are outside of the dialog div, or the .ui-dialog tag.

If you dig down into the dialog UI code in the _allowInteraction function it does the following.

//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;
}

All I needed to do was add a javascript file after my jQuery UI file with the following code:

$.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 );
    }
}

Since the _allowInteraction fire whenever focus is lost from the dialog, I just needed to look for .x-panel :input, since this is what fired off the event.

In your case, you'd just need to see what the closest element is for the CKEditor. This way you wouldn't need to do any type of workaround and you can just simply set the dialog's modal option to true. The reason you don't want to do this is if you were to display another dialog on top of that one. You're overlays could be ordered wrong or appended to the wrong element. The dialog UI already has code to handle that.

By doing the $.widget('ui.dialog', $.ui.dialog, function(){}); it's applied to all the ui dialog's for our site.

Working jsFiddle Demo

Points of reference:

jQuery Dialog UI _allowInteraction

jQuery UI Widget Factory