Question

I have a jquery-ui modal popup that contains an iframe. It is called as so:

    $("#modalDiv").dialog({
        modal: true,
        autoOpen: false,
        height: '400',
        width: '400',
        position: ['150', '200'],
        draggable: true,
        resizable: false,
        title: 'Loading...'
    });

    $('#modalIFrame').attr('src', url);
    $('#modalDiv').dialog('open');

The problem is that dragging the modal around is very sketchy. I understand it’s basically due to the iframe intercepting the drag event. I’m trying to implement the “iframeFix” solution, but it doesn’t seem to work. I am currently calling it from the popup as so:

    window.parent.$("#modalDiv").draggable("option", "iframeFix", true);

I also tried it from the parent page in these two ways:

    $("#modalDiv").draggable("option", "iframeFix", true);
    $("#modalIFrame").draggable("option", "iframeFix", true);

No luck.

Answer 1

I am unsure as to how the iframeFix works, but here is the solution that I use at the moment. I added a bug report on the jQuery UI website and it seems that they are working on this for the next release of jQuery UI.

I notice that your dialog specifies that it is non-resizable, so the following should resolve your problem. If you required a resizable dialog then you would need to replace dialogdragstart with dialogdragstart dialogresizestart and likewise dialogdragstop with dialogdragstop dialogresizestop.

$("#modalDiv")
    .dialog({
        modal    : true,
        autoOpen : false,
        height   : 400,
        width    : 400,
        position : [ 150, 200 ],
        draggable: true,
        resizable: false,
        title    : 'Loading...'
    })
    .bind('dialogdragstart', function() {
        var overlay = $(this).find('.hidden-dialog-overlay');
        if (!overlay.length) {
            overlay = $('<div class="hidden-dialog-overlay" style="position:absolute;top:0;left:0;right:0;bottom:0;z-order:100000;"></div>');
            overlay.appendTo(this);
        }
        else
            overlay.show();
    })
    .bind('dialogdragstop', function() {
        $(this).find('.hidden-dialog-overlay').hide();
    });