jQuery UI模式对话框应固定在滚动条上_Jquery_Jquery Ui

jQuery UI模式对话框应固定在滚动条上

jquery jquery-ui

jQuery UI模式对话框应固定在滚动条上,jquery,jquery-ui,Jquery,Jquery Ui,有没有可能修复jQuery UI的模式窗口，因此当用户使用右侧的滚动条时，后面的滚动条会滚动，但模式窗口保持不变？创建一个具有固定位置的css类： .fixed-dialog{ position: fixed; top: 50px; left: 50px; } 然后在创建对话框时将该类作为选项的一部分附加： $( ".selector" ).dialog({ dialogClass: 'fixed-dialog' }); 以下是一个工作示例：这个例子并不太浮华，因为我无法让JS

有没有可能修复jQuery UI的模式窗口，因此当用户使用右侧的滚动条时，后面的滚动条会滚动，但模式窗口保持不变？

创建一个具有固定位置的css类：

.fixed-dialog{
  position: fixed;
  top: 50px;
  left: 50px;
}

然后在创建对话框时将该类作为选项的一部分附加：

$( ".selector" ).dialog({ dialogClass: 'fixed-dialog' });

以下是一个工作示例：这个例子并不太浮华，因为我无法让JSFIDLE设置对话框的样式

如果你想在屏幕中间居中对话，尝试设置<代码>顶部：50%；左：50%如所建议的那样：

如果希望所有对话框都具有此行为，可以修改

jquery.ui.dialog.css

文件

更改：

.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }

致：

或者，如果要保留原始文件，只需添加以下行：

div.ui-dialog {position:fixed;}

这是一个老问题，但我发现James的答案（将JQuery的div.ui-dialog修改为position:fixed）提供了这个问题的一半答案。另一半是这样的：确保父元素的高度为100%。在我的例子中，主体是对话框的父对象，因此我有以下行：

<body style='height: 100%; min-height: 100%;'>

。。。最后，我的对话框出现在浏览器窗口的中心，并在滚动时保持在那里。希望这能帮助未来的谷歌用户通过这里。

或者在创建CSS时应用CSS：

        $("#Modal").dialog({
        autoOpen: false,
        width: 500,
        height: 'auto',
        position: [50, 150],
        create: function (event) {
            $(event.target).parent().css({ 'position': 'fixed', "left": 50, "top": 150 });
          }
        });

好的，但是布局不会居中。它将保持50像素的顶部和50像素的左侧，但这不是中心。如何居中？Niko Nik我更新了我的答案来处理居中，我不知道你想保持居中。@jk。谢谢，我没有意识到你可以用js fiddle实现这一点。使用这种从1.9.0开始的方法，如果你在点击打开弹出窗口的链接之前滚动到底部，对话框将脱离屏幕。我需要使用

position:fixed！重要的

因为其他正在使用的类都将其设置为

绝对值

而不是我所需要的完美值！此外，如果不想指定，也不需要指定确切的位置。它与

draggable:true

proprerty兼容，因此您可以让用户移动它，它将停留在他们滚动时留下的位置。

div.ui-dialog {position:fixed;}

        $("#Modal").dialog({
        autoOpen: false,
        width: 500,
        height: 'auto',
        position: [50, 150],
        create: function (event) {
            $(event.target).parent().css({ 'position': 'fixed', "left": 50, "top": 150 });
          }
        });