Реализация jquery iframeFix - PullRequest
Новая
       18

Реализация jquery iframeFix

2 голосов
/ 29 июня 2011

У меня есть модальное всплывающее окно jquery-ui, которое содержит iframe.Это называется так: 

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

Не повезло.

1 Ответ

1 голос
/ 18 августа 2011

Я не уверен, как работает iframeFix, но вот решение, которое я использую в данный момент.Я добавил отчет об ошибке на веб-сайте пользовательского интерфейса jQuery, и похоже, что они работают над этим для следующего выпуска пользовательского интерфейса jQuery.

Я заметил, что в вашем диалоговом окне указано, что это неизменяемого размера, поэтому следующее должно решить вашу проблему.Если вам требуется диалоговое окно с изменяемым размером, вам необходимо заменить dialogdragstart на dialogdragstart dialogresizestart, а также dialogdragstop на 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();
    });
...