IE/Firefox 中的 JQueryUI 对话框拖动/移动光标错误对齐答案

【问题标题】：JQueryUI Dialog Drag / Move Cursor Mis-Alignment in IE/FirefoxIE/Firefox 中的 JQueryUI 对话框拖动/移动光标错误对齐
【发布时间】：2014-12-15 14:59:24
【问题描述】：

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

如果页面短或小于用户的屏幕，它会很好地工作。

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

光标应该在对话框标题栏上。取而代之的是标题栏和实际光标图标之间的距离。页面越长，距离越大。

请看截图。

该问题仅在 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);

    }

【问题讨论】：

标签： jquery jquery-ui jquery-ui-dialog

【解决方案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);

        }

【讨论】：