IE / Firefox中的JQueryUI对话框拖动/移动光标未对齐

TTCG 发表于 Dev

TTCG

我正在尝试使用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);

    }

dm4web

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);

        }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。