Problems with nicedit and jquery dialog modal - Add link button form is not selectable

Question

I have some troubles using nicedit with jquery dialogs.

The problem is this:

When I create a jquery dialog (modal), on open event init wysiwyg editor (nicedit) -> everything is ok. But, if I click on the add link button, I can't click on the inputs that appears.

If I set the jquery dialog no modal, works perfectly.

This is my example:

http://jsfiddle.net/ws97R/16/

<div id="dialog" title="test" style="display:none;">
    <form><textarea id="editor"></textarea></form>
</div>
<input type="button" id="test" value="open dialog wysiwyg"/>

$('#test').click(function(){
    $('#dialog').dialog({
        width:400,
        height:400,
        modal:true,
        open: function() {
            new nicEditor({ 
                minHeight: 220, 
                maxHeight: 220, 
                buttonList: ['link', 'unlink']
            }).panelInstance('editor');
        }
    });
});

Answer 1

it looks like the behavior you are describing is on purpose, if you create the dialog as modal, this code from jquery-ui.js is running:

It seems that it artifically creates an overlay element (with class .ui-widget-overlay ui-front) and binds keeping focus on this element when user clicks anywhere on the overlay. This is why you can not reach the desired input.