Question

是否有可能修复jQuery UI的模态窗口，所以当用户使用右侧的滚动条时，滚动后面的一侧，但模态窗口是否会保持修复？

Answer 1

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

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

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

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

这是一个有效的例子：http://jsfiddle.net/3hrSv/ 这个例子并不太华丽，因为我无法使用jsfiddle来设置对话框的样式。

如果您想将对话框置于屏幕中间，请尝试按照以下建议在{c}中设置top:50%; left:50%;：http://css-tricks.com/320-quick-css-trick-how-to-center-an-object-exactly-in-the-center/

Answer 2

如果您希望所有对话框都有此行为，则可以修改jquery.ui.dialog.css文件。

变化：

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

要：

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

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

div.ui-dialog {position:fixed;}

到页面引用的一个css文件或页面上的样式块。

Answer 3

或者在创建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 });
          }
        });

Answer 4

这是一个老问题，但我发现詹姆斯＆＃39;回答（修改JQuery的div.ui-dialog到position：fixed）提供了这个问题的答案的一半。另一半是这样的：确保父元素的高度是100％。在我的情况下，正文是我的对话框的父亲，所以我有这一行：

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

那，加上詹姆斯＆＃39;建议将其添加到我的CSS文件中：

div.ui-dialog {position:fixed;}

...终于让我的对话框显示在浏览器窗口的中心并在滚动时保持在那里。希望这有助于未来可能通过这里的谷歌。

应该在滚动时修复jQuery UI模式对话框

4 个答案: