JQueryUI对话框在IE / Firefox中拖动/移动光标错位

Question

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

如果页面短于或小于用户的屏幕，则效果很好。

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

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

请参阅截图。

问题仅出现在IE和Firefox中。它适用于谷歌浏览器。

我已经在JSFiddle中创建了测试页面。对不起，如果我的问题令人困惑。您可以在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);

        }