使用位置修复时,jQuery UI对话框会在屏幕外显示

时间:2022-12-06 13:52:52

I am using jQuery UI to display a dialog and I want it to always stay at the same position regardless of the scroll state. So I just added the css code

我使用jQuery UI来显示一个对话框,我希望它始终保持在相同的位置,无论滚动状态如何。所以我刚刚添加了css代码

.ui-dialog {
    position: fixed;
}

Now if you drag the dialog to the bottom, it is possible to move it offscreen so that it is completely gone. Anyone knows how to prevent that? See this fiddle for a demonstration: https://jsfiddle.net/d0pgfwk7/

现在,如果将对话框拖到底部,则可以将其移出屏幕以使其完全消失。谁知道如何防止这种情况?请看这个小提琴演示:https://jsfiddle.net/d0pgfwk7/

2 个解决方案

#1


1  

I finally fixed my problem. The solution was not to use the draggable setting of the dialog but to use the widget itself. So my code now looks like this:

我终于解决了我的问题。解决方案不是使用对话框的可拖动设置,而是使用小部件本身。所以我的代码现在看起来像这样:

$("#dialog").dialog(
    {
      draggable: false,
      dialogClass: 'my-dialog'
    }
});
$('.my-dialog').draggable({
    containment: 'window'
});

#2


0  

From what I can get you are saying the jquery dialog box is draggable. If this is the case it is pretty simple fix just use

从我可以得到你说你的jquery对话框是可拖动的。如果是这种情况,只需使用即可

 draggable: false

See the fiddle here https://jsfiddle.net/d0pgfwk7/

请看这里的小提琴https://jsfiddle.net/d0pgfwk7/

EDIT : Please look at fiddle here

编辑:请看这里的小提琴

http://jsfiddle.net/tj_vantoll/LZ9SR/

http://jsfiddle.net/tj_vantoll/LZ9SR/

For more details refer this link https://bugs.jqueryui.com/ticket/8741

有关更多详细信息,请参阅此链接https://bugs.jqueryui.com/ticket/8741

#1


1  

I finally fixed my problem. The solution was not to use the draggable setting of the dialog but to use the widget itself. So my code now looks like this:

我终于解决了我的问题。解决方案不是使用对话框的可拖动设置,而是使用小部件本身。所以我的代码现在看起来像这样:

$("#dialog").dialog(
    {
      draggable: false,
      dialogClass: 'my-dialog'
    }
});
$('.my-dialog').draggable({
    containment: 'window'
});

#2


0  

From what I can get you are saying the jquery dialog box is draggable. If this is the case it is pretty simple fix just use

从我可以得到你说你的jquery对话框是可拖动的。如果是这种情况,只需使用即可

 draggable: false

See the fiddle here https://jsfiddle.net/d0pgfwk7/

请看这里的小提琴https://jsfiddle.net/d0pgfwk7/

EDIT : Please look at fiddle here

编辑:请看这里的小提琴

http://jsfiddle.net/tj_vantoll/LZ9SR/

http://jsfiddle.net/tj_vantoll/LZ9SR/

For more details refer this link https://bugs.jqueryui.com/ticket/8741

有关更多详细信息,请参阅此链接https://bugs.jqueryui.com/ticket/8741