CKEditor 4 - Link dialog doesn't work when in twitter bootstrap modal

Question

I have an instance of CKEditor in a twitter bootstrap modal, which is working just fine, except for when you try to use a dialog that has a textbox or a dropdown it is not accessible.

I'm wondering if any one else has had such an issue and found a way to make it work.

Thanks

Edit:

I did some digging and found a hack that fixed the issue.

Answer 1

Just remove the tabindex="-1" from this line in your bootstrap modal.

<div class="modal fade" tabindex="-1" role="dialog">

Source

Note

Beware of accepted answer as it could make your browser crash.

If you open a modal from another modal, the accepted answer will create an infinite loop that will make the entire page crash.

Answer 2

Just put this after Bootstrap script and all problem will fixed

<script>
     //The final solution code for all bugs ckeditor in twitter bootstrap3' modal
     $.fn.modal.Constructor.prototype.enforceFocus = function() {
             var $modalElement = this.$element;
             $(document).on('focusin.modal',function(e) {
                     var $parent = $(e.target.parentNode);
                     if ($modalElement[0] !== e.target
                                     && !$modalElement.has(e.target).length
                                     && $(e.target).parentsUntil('*[role="dialog"]').length === 0) {
                             $modalElement.focus();
                     }
             });
     };
</script>