jquery iframeFix 实现

Question

我有一个包含 iframe 的 jquery-ui 模式弹出窗口。它的名称是这样的:

    $("#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');

问题是拖动模态框非常粗略。我知道这基本上是由于 iframe 拦截了拖动事件。我正在尝试实现“iframeFix”解决方案，但它似乎不起作用。我目前从弹出窗口中这样调用它:

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

我还通过这两种方式从父页面尝试过:

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

运气不好。

Answer 1

我不确定 iframeFix 是如何工作的，但这是我目前使用的解决方案。我添加了bug report在 jQuery UI 网站上，他们似乎正在为 jQuery UI 的下一个版本进行此工作。

我注意到您的对话框指定它不可调整大小，因此以下内容应该可以解决您的问题。如果您需要可调整大小的对话框，则需要将 dialogdragstart 替换为 dialogdragstartdialogresizestart，同样将 dialogdragstop 替换为 dialogdragstopdialogresizestop .

$("#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();
    });