jquery ui对话框固定定位

Question

即使页面滚动,我也需要对话框来保持其位置固定,所以我在http://forum.jquery.com/topic/dialog-position-fixed-12-1-2010使用了扩展名,但它有2个问题:

• 在页面滚动的IE和Firefox中闪烁(在Safari/Chrome中很好)

• 在关闭然后重新打开时,它会丢失其粘性并随页面滚动.

这是我用于创建对话框的代码:

$('<div id="'+divpm_id+'"><div id="inner_'+divpm_id+'"></div><textarea class="msgTxt" id="txt'+divpm_id+'" rows="2"></textarea></div>')
                .dialog({
                autoOpen: true,
                title: user_str,
                height: 200,
                stack: true,
                sticky: true //uses ui dialog extension to keep it fixed
     });

这是我用来重新打开它的代码:

jQuery('#'+divpm_id).parent().css('display','block');

建议/解决方案？

谢谢

Answer 1

我尝试了这里发布的一些解决方案,但是如果在打开对话框之前滚动了页面,它们就无法工作.问题在于它在不考虑滚动位置的情况下计算位置,因为在该计算期间位置是绝对的.

我找到的解决方案是将对话框的父级CSS设置为固定PRIOR以打开对话框.

$('#my-dialog').parent().css({position:"fixed"}).end().dialog('open');

这假定您已经将autoOpen设置为false初始化了对话框.

请注意,如果对话框可调整大小,则不起作用.必须在禁用调整大小的情况下对其进行初始化,以使位置保持固定.

$('#my-dialog').dialog({ autoOpen: false, resizable: false });

彻底测试了这一点,到目前为止没有发现任何错误.

Answer 2

我将一些建议的解决方案结合到以下代码中.在Chrome,FF和IE9中,滚动,移动和调整大小对我来说很好.

$(dlg).dialog({
    create: function(event, ui) {
        $(event.target).parent().css('position', 'fixed');
    },
    resizeStop: function(event, ui) {
        var position = [(Math.floor(ui.position.left) - $(window).scrollLeft()),
                         (Math.floor(ui.position.top) - $(window).scrollTop())];
        $(event.target).parent().css('position', 'fixed');
        $(dlg).dialog('option','position',position);
    }
});

更新:

如果要将其设置为所有对话框的默认值:

$.ui.dialog.prototype._oldinit = $.ui.dialog.prototype._init;
$.ui.dialog.prototype._init = function() {
    $(this.element).parent().css('position', 'fixed');
    $(this.element).dialog("option",{
        resizeStop: function(event,ui) {
            var position = [(Math.floor(ui.position.left) - $(window).scrollLeft()),
                            (Math.floor(ui.position.top) - $(window).scrollTop())];
            $(event.target).parent().css('position', 'fixed');
            // $(event.target).parent().dialog('option','position',position);
            // removed parent() according to hai's comment (I didn't test it)
            $(event.target).dialog('option','position',position);
            return true;
        }
    });
    this._oldinit();
};

Answer 3

我无法得到Scott的回答来使用jQuery UI 1.9.1.我的解决方案是在open事件的回调中重新定位对话框.首先将css位置设置为fixed.然后将对话框放在您想要的位置:

$('selector').dialog({
    autoOpen: false,
    open: function(event, ui) {
        $(event.target).dialog('widget')
            .css({ position: 'fixed' })
            .position({ my: 'center', at: 'center', of: window });
    },
    resizable: false
});

注意:如另一个答案中所述,调整对话框大小会将其位置再次设置为绝对值,因此我已禁用可调整大小.

Answer 4

基于Langdons上面的评论,我尝试了以下内容,它适用于jQuery-UI 1.10.0和可调整大小的对话框:

$('#metadata').dialog(
{
    create: function (event) {
    $(event.target).parent().css('position', 'fixed'); 
    },
    resizeStart: function (event) {
    $(event.target).parent().css('position', 'fixed'); 
    },
    resizeStop: function (event) {
    $(event.target).parent().css('position', 'fixed'); 
    }
});

Answer 5

尝试：

$(document).ready(function() {
  $('#myDialog').dialog({dialogClass: "flora"});
  $('.flora.ui-dialog').css({position:"fixed"});
)};

（来自http://dev.jqueryui.com/ticket/2848）