JQuery UI 对话框在 IE/Firefox 中拖动/移动光标未对齐

Question

我正在尝试使用 JQueryUI 对话框创建通用消息显示。

如果页面短或小于用户的屏幕，它会非常有效。

但是当页面太长并且用户必须滚动时，用户无法正确移动对话框。

光标应位于对话框标题栏上。相反，标题栏和实际光标图标之间有一段距离。页面越长，距离越大。

请查看屏幕截图。

此问题仅出现在 IE 和 Firefox 中。它适用于 Google Chrome。

我已经在 J​​SFiddle 中创建了测试页面。抱歉，如果我的问题令人困惑。您可以在 JSFiddle 中清楚地看到问题。

http://jsfiddle.net/thetwai/6cuof2tm/

  $(function () {
        $("#dvDialog").dialog({
            autoOpen: false
        });
    });



    ShowCustomInfoMessageBox = function (msg, title) {

        $("#dvDialog").dialog({
            title: title,
            width: 400,                
        }).dialog("open").html(msg);

    }

Answer 1

http://jsfiddle.net/6cuof2tm/1/

使用 appendTo 选项并用 div {position:relative} 包裹内容

HTML:

<div id="test">
    Long Page test with JQuery UI Dialog Please scroll to botton to view Button
    <br />
    <br />Scroll to Bottom....
    <br />
    <br />....
    <div style='clear:both;'></div>
    <button onclick="ShowCustomInfoMessageBox('Try to move the dialog','test title');" style="margin-top: 700px; clear: both">Button at the bottom of the page</button>
</div>

<div id="dvDialog"></div>

CSS:

#test {
    position:relative
}

JQ:

 ShowCustomInfoMessageBox = function (msg, title) {

            $("#dvDialog").dialog({
                title: title,
                width: 400,
                appendTo: "#test"
            }).dialog("open").html(msg);

        }