ckeditor within jquery-ui dialog - internet explorer 11 problem with tool dropdowns

Question

I'm trying to display a ckeditor within a jquery-ui dialog, and it works fine - at first sight.

But in IE11, when I click on any tool button which opens a dropdown / selection (e.g. color selection), there's a short flash of the required overlay on mouse-up, but the next moment it's gone.

It works in Chrome and Edge, but currently IE11 is the most important target browser.

jQuery is 1.11, jQuery-UI is 1.11.4, ckEditor is 4.15.1.

---

I found out, the problem only occurs, when dialog is modal. Here's a sample:

function openDialogEditor() {
    var somedialog = document.createElement("div");
    somedialog.id = "somedialog";
    somedialog.innerHTML = '<div id="somediv"><textarea id="someid" name="somename" class="ckeditor" style="height:350px;">Stackoverflow is great!</textarea></div>';
    document.body.appendChild(somedialog);
    
    jQuery(somedialog).dialog({width: '800px', modal: true}).parent().promise().done(function(dlg) {
        CKEDITOR.replace("someid");
    });
}

If you change modal: true to modal: false, the problem is fixed - but the dialog should be modal.

My workaround: see answer below.

Answer 1

Possible solution, working in IE11:

1. Set the dialog to modal: false.
2. Add a custom overlay using jquery's css classes.
3. Remove the custom overlay on dialog close.

(My code sample also requires removing the editor for reusing the openDialogEditor() function - this of course could also be handled differently.)

---

1 + 2)

function openDialogEditor() {
    var somedialog = document.createElement("div");
    somedialog.id = "somedialog";
    somedialog.innerHTML = '<div id="somediv"><textarea id="someid" name="somename" class="ckeditor" style="height:350px;">Stackoverflow is great!</textarea></div>';
    document.body.appendChild(somedialog);
    
    jQuery(somedialog).dialog({width: '800px', modal: false}).parent().promise().done(function(dlg) {
        CKEDITOR.replace("someid");
        dlg.css('z-index', '101').parent().append('<div id="ownOverlay" class="ui-widget-overlay ui-front" style="z-index:100"></div>');
    });
}

3. Extend dialog close function:

jQuery.widget("ui.dialog", jQuery.ui.dialog, {
    close: function(ev) {
        // remove custom overlay:
        jQuery("#ownOverlay").remove();
        // remove dialog and editor:
        var dlgDiv = jQuery(ev.target).closest('div[role="dialog"]')[0];
        dlgDiv.parentNode.removeChild(dlgDiv);
        
        return this._super(ev);
    }
});

---

If you have better solutions, suggestions, improvements: please comment. :)