jquery - 粘性 jquery-ui 对话框不让鼠标指针离开

Question

看起来 Jquery 对话框很喜欢我的鼠标指针。

我有一个 jqgrid 和一个 div 内的几个文本框，我将其用作对话框。

每当我尝试通过拖动来移动对话框时，它都会粘在鼠标指针上并且不会松开。

这是代码

$("#Applon").dialog({
    autoOpen: false,
    height: 370,
    width: 710,
    modal: true,
    buttons: {
        //'Create an account': function() { },
        Close: function() {
            $(this).dialog('close');
            //$('input:visible:enabled:first').focus();
        }
    },
    close: function() {
    }
});

我该如何解决这个问题？

谢谢

编辑

此外，当我打开对话框时，滚动条会出现在我的页面上。当我第二次打开对话框时，滚动条也出现在对话框上。

编辑2

这是网格

jQuery('#jgrid2').jqGrid({
    autowidth: true,
    altRows: true,
    altclass: 'grdAltRwClr',
    datatype: 'local',
    forceFit: true,
    gridview: true,
    mtype: 'post',
    height: 190,
    //width: 350,
    rowNum: 0,
    postData: { p_hdrid: function() { return $('#p_hdrid').val(); } },
    url: window.rootPath + 'Invoice/JGridDtlData',
    beforeSelectRow: function() { return false; },
    gridComplete: function() {
        GridComplete2();
    },
    colModel: [
        { name: 'act', label: 'View', resizable: false, search: false, sortable: false, title: false, width: 8, index: 'act' }
        , { name: 'p_slabid', label: 'Slab ID', width: 15, index: 'p_slabid' }
        , { name: 'p_fslab', label: 'From', width: 15, index: 'p_fslab', sortable: false }
        , { name: 'p_tslab', label: 'Upto', width: 15, index: 'p_tslab', sortable: false }
        , { name: 'p_amt', label: 'Amount', width: 15, index: 'p_amt', sortable: false }

         ]
});

HTML

    <div id="Applon" title="Edit Slab Details" style="border-style: 1px; width: 680px; height:370px; background-color: #00CC99; z-index: 999; display: block; padding-left: 10px;">
    <div class="content">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td>
                <form action="\" id="frmDtl">
                    <table cellpadding="0" cellspacing="0">
                       ....controls go here

                    </table>
                </form>
                </td>

            </tr>
        </table>
    </div>
    <div class="content" style="width: 690px">
        <table id="jgrid2">
        </table>
        <div id="pager2">
        </div>
    </div>

    </div>

编辑:3 这是 CSS

element.style {
    -moz-user-select: none;
}
.ui-helper-clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
jquery...s?v=5.3 (line 12)
.ui-draggable .ui-dialog-titlebar {
    cursor: move;
}
jquery...s?v=5.3 (line 417)
.ui-dialog .ui-dialog-titlebar {
    font-size: 1.1em;
    padding: 2px 2px 2px 10px;
    position: relative;
}
jquery...s?v=5.3 (line 391)
.ui-dialog-titlebar {
    background-color: #5D81AB;
    background-image: url("../../Images/ThkStrip.jpg");
    background-repeat: repeat-x;
}
Sales_...s?v=5.3 (line 1436)
.ui-corner-all {
    border-radius: 6px 6px 6px 6px;
}
jquery...s?v=5.3 (line 282)
.ui-widget-header {
    border: 1px solid #C4D1E7;
    color: #222222;
    font-weight: bold;
}
jquery...s?v=5.3 (line 55)
.ui-helper-clearfix {
    display: block;
}

Answer 1

这是一个工作 jsfiddle使用您提供的代码。

http://jsfiddle.net/6FWPc/

这适用于 Chrome 和 IE...

您能确认它也适合您吗？

编辑正如 Monkieboy 所说，鼠标向上事件发生在浏览器外部，因此在您再次单击之前，对话框会认为您仍在鼠标向下事件中。

我能想到的就是让draggable为假:

$("#Applon").dialog({
    autoOpen: false,
    height: 370,
    width: 710,
    modal: true,
    draggable: false,
    buttons: {
        //'Create an account': function() { },
        Close: function() {
            $(this).dialog('close');
            //$('input:visible:enabled:first').focus();
        }
    },
    close: function() {
    }

});

http://jsfiddle.net/cumsL/

编辑2您可以使用 mouseleave() 事件来注册 mouseup() 参见 fiddle

$('document').ready(function() {
     $("#main").mouseleave(function()
                           {
                               $(this).mouseup();
                           });
});

http://jsfiddle.net/s5D6J/