42

即使页面滚动，我也需要对话框保持其位置固定，所以我在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');

建议/解决方案？

谢谢

4

15 回答 15

45

我尝试了此处发布的一些解决方案，但如果在打开对话框之前已滚动页面，它们将不起作用。问题是它在计算位置时没有考虑滚动位置，因为在这个计算过程中位置是绝对的。

我找到的解决方案是在打开对话框之前将对话框的父级 CSS 设置为固定。

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

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

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

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

对此进行了彻底的测试，到目前为止没有发现任何错误。

于 2011-06-28T00:20:13.137 回答
33

I combined some suggested solutions to the following code. Scrolling, moving and resizing works fine for me in Chrome, FF and 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);
    }
});

Update:

If you want to make it default for all dialogs:

$.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();
};
于 2012-02-11T18:18:47.227 回答
10

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

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

注意：如另一个答案中所述，调整对话框大小将再次将其位置设置为绝对，因此我禁用了resizable。

于 2012-12-28T12:54:25.217 回答
7

基于上述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'); 
    }
});
于 2013-03-02T20:13:02.860 回答
4

尝试：

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

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

于 2010-06-18T22:52:11.270 回答
2

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

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

并将 myPosition css 类定义为：

.myPosition {
    position: fixed;
}
于 2012-07-07T21:31:57.297 回答
1 
$("#myDilog").dialog({
    create:function(){
        $(this).parent().css({position:"fixed"});
    }
});
于 2015-08-26T09:36:15.483 回答
0 
$('#'+tweetidstack.pop()).dialog("open").parent().css({position:"fixed"});

为什么使用 $(document).ready ？这可能是最近的发展，但它现在工作正常。

于 2011-03-24T13:35:31.330 回答
0

首先，创建您的对话框。像这样的东西：

$("#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.
于 2013-06-13T12:59:10.173 回答
0 
 $('#myDialog').dialog({ dialogClass: "flora" });
        $('.flora.ui-dialog').css({ top: "8px" });

无论我们是否单击，这将使对话框保持在顶部位置。

于 2010-06-23T06:43:59.950 回答
0 
$( ".ui-dialog" ).css("position","fixed");  

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

将此代码放在对话框的打开功能上

于 2013-05-04T08:52:39.777 回答
0

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

//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
    }
});

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

于 2014-07-05T11:19:29.050 回答
0

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

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

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

open: function(event, ui) {
        $(event.target).parent().css('top', '30%')
    }

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

于 2021-02-28T21:01:50.757 回答
0

虽然与上面的其他一些答案类似，但我发现我必须做的不仅仅是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')调用之前更改对话框的值。

于 2017-05-15T10:28:36.523 回答
0

正如我在博客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");

此外，当你调用“<code>$(this).window(“options”);” 在“onResize”方法中，然后启动您的应用程序，您看不到窗口；所以我必须插入“.window(“open”);” 在和声明对话框。

我希望能帮助你。

于 2017-12-06T12:47:57.633 回答