Problem with CKEditor inside a ColorBox modal popup

Please can anyone help开发者_StackOverflow me out. I have an html page in which I have added a modal popup from ColorBox. In the ColorBox popup, I have added a CKEditor. The problem is as follows:

In IE, the CKEditor works fine, but in FF & Chrome, I get the CKEditor like in readonly mode (I can't type anything in it). If i put the CKEditor directly into the page (and not in the modal popup), it works fine in all browsers.

I think this might be a problem with the z-index on one of the elements generated by CKEditor. But I don't know which one exactly?

I would really appreciate some help plz, thanks in advance!

We got around our problem by switching lightboxes, rather than use ColorBox, use Simple Modal. I have a funny feeling it will work for you. Good luck!

<script>
  $(document).ready(function() {
    initCKEditor(); //function ckeditor.
    $("#id_textarea").val(CKEDITOR.instances.id_textarea.getData());
  });
</script>

Render/create ckeditor on colorbox "onComplete" callback.

See callbacks here : http://www.jacklmoore.com/colorbox

After some debugging I found that it is because of a CSS rule.

In the skin named kama you need to change the following CSS rule in mainui.css from:

.cke_skin_kama .cke_browser_ie.cke_browser_quirks .cke_contents iframe
{
    position: absolute;
    top: 0;
}

To:

.cke_skin_kama .cke_browser_ie.cke_browser_quirks .cke_contents iframe
{
    top: 0;
}

Depending on your setup, you might need to change it in skins/kama/editor.css

I however recommend upgrading to a newer version of ckeditor. I found this issue on version 3.6.2.