Question

我需要对话框来保持其位置固定，即使页面滚动，所以我使用了 http://forum.jquery.com/topic/dialog-position-fixed-12-1-2010的延伸，但有两个问题：

它在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's评论，我尝试了以下内容，它适用于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）

Answer 6

使用CSS强制对话框的位置为position:fixed

$('.selector').dialog({ dialogClass: 'myPosition' });

并将myPosition css类定义为：

.myPosition {
    position: fixed;
}

Answer 7

$("#myDilog").dialog({
    create:function(){
        $(this).parent().css({position:"fixed"});
    }
});

Answer 8

 $('#myDialog').dialog({ dialogClass: "flora" });
        $('.flora.ui-dialog').css({ top: "8px" });

这将使对话保持在最高位置，无论我们点击了什么。

Answer 9

$('#'+tweetidstack.pop()).dialog("open").parent().css({position:"fixed"});

为什么要使用$（文件）.ready？这可能是最近的发展，但它现在运作良好。

Answer 10

$( ".ui-dialog" ).css("position","fixed");  

$( ".ui-dialog" ).css("top","10px");

将此代码放在对话框

的开放功能上

Answer 11

首先，创建对话框。像这样：

$("#dialog_id").dialog({
                autoOpen : false,
                modal : true,
                width: "auto",
                resizable: false,
                show: 'fade',
                hide: { effect:"drop",duration:400,direction:"up" },
                position: top,
                height: 'auto',
                title: "My awesome dialog",
                resizeStart: function(event, ui) {
                    positionDialog();
                },
                resizeStop: function(event, ui) {
                    positionDialog();
                }
            });
            $("#dialog_id").dialog('open');

然后用它自动居中：

    function positionDialog (){
        setInterval(function(){
            if($("#dialog_id").dialog( "isOpen" )){
                $("#dialog_id").dialog('option','position',$("#dialog_id").dialog( "option", "position" ));
            }
        },500);
    }
//setInterval is for make it change position "smoothly"
//You can take it off and leave just the if clausule and its content inside the function positionDialog.

Answer 12

解决方案实际上非常简单。我不知道问题被提出时是否适用，但现在无论如何。

//First a container/parent-div with fixed position is needed
var dialogContainer=document.body.appendChild(document.createElement("div"));
dialogContainer.style.position="fixed";
dialogContainer.style.top=dialogContainer.style.left="50%";//helps centering the window

//Now whenever a dialog is to be created do it something like this:
$(myDialogContent).dialog({
    appendTo: dialogContainer,
    position: { 
        at: 'center center',
        of: dialogContainer
    }
});

关于“appendTo”：http://api.jqueryui.com/dialog/#option-appendTo
关于“职位”：http://api.jqueryui.com/position/

Answer 13

虽然与上面的其他一些答案类似，但我发现我必须做的不仅仅是position: fix对话框，但我还必须position: static它的内容是为了保持它与对话框。

$('<div id="myDialog" class="myClass">myContent</div>')
        .dialog(dialogOptions)
        .parent()
        .css({ position: 'fixed' })
        .end()
        .position({ my: 'center', at: 'center', of: window })
        .css({ position: 'static' });

在此之后，我可以随时拨打.dialog('open')，只会出现在我离开的地方。我实际上在一个函数中有这个函数，它将返回现有的对话框或根据需要创建一个新的对话框然后我只是在调用.dialog('open')之前更改对话框的值。

Answer 14

正如我在博客https://xbrowser.altervista.org/informatica-portata/jquery-easyui-bug-fix-window-dialog-position-widget/中写的那样我在“window”元素或“dialog”元素中发现了一个错误。当您实例化此窗口小部件时，它会从主窗口浏览器中移出，特别是在顶部和左侧位置（当您拖动它时调整它的大小）。为了解决这个问题，我已经实现了这个解决方案。

您可以阅读以下源代码：

$(dialog).window({
   onMove: function(left, top) {
   if (left < 0 || top < 0) {
     left = (left < 0) ? 0 : left;
     top = (top < 0) ? 0 : top;
     $(this).window('move', {left: left, top: top});
   }
},
onResize: function(width, height) {
  var opt = $(this).window("options");
  var top = opt.top;
  var left = opt.left;
  if (top < 0) {
    top = (top < 0) ? 0 : top;
    $(this).window('move', {left: left, top: top});
  }
}
}).window("open");

The same code is for dialog:

$(dialog).dialog({
  onMove: function(left, top) {
  if (left < 0 || top < 0) {
     left = (left < 0) ? 0 : left;
     top = (top < 0) ? 0 : top;
     $(this).dialog('move', {left: left, top: top});
  }
},
onResize: function(width, height) {
   var opt = $(this).window("options");
   var top = opt.top;
   var left = opt.left;
   if (top < 0) {
     top = (top < 0) ? 0 : top;
     $(this).dialog('move', {left: left, top: top});
   }
}
}).dialog("open");

此外，当您在“onResize”方法中调用“$(this).window(“options”);”时，启动您的应用，你没看到窗户;所以我必须插入“.window（”open“）;”和对话框的声明。

我希望能帮助你。

Answer 15

我发现这些答案对我不起作用，但将其中一些答案结合起来可以。我使用 create 函数将对话框设置为固定状态，因此在创建对话框时它不会向下滚动窗口。

<button id="a" type="button">BUTTON 1</button>
<button id="b" type="button">BUTTON 2</button>

我还使用了 open 函数来确保对话框不会通过更改顶部值从屏幕上消失。

create: function (event) { 
        $(event.target).parent().css('position', 'fixed')
    }

这适用于 autoOpen 和可调整大小。

jquery ui对话框固定定位

15 个答案: