打开表格内的 Jquery-UI 对话框没有显示在正确的位置？

Question

这是动态显示对话框的 jQuery 代码。

function ShowDialog(id) {

        var x = $('btn_' + id).position();

        $("#dialog_" + id).dialog({
            title: "Description",
            position:{ my:"" },
            autoOpen: false,
            show: {
                effect: "blind",
                duration: 1000
            },
            hide: {
                effect: "explode",
                duration: 1000
            },
            position:
                 { my: "center", at: "center", of: window }
        });

        var theDialog = $("#dialog_" + id);
        theDialog.dialog("open");

    }

这里是动态生成的网格视图的 Html 代码。

<asp:TemplateField HeaderText="Description" ItemStyle-Width="80px">
                <ItemTemplate>
                    
                    <div id="dialog_1" style="display: none;">
                        <p>Details</p>
                    </div>

                    <button type="button" class="btn btn-success btn-sm btn_1" onclick="ShowDialog(1)">Show Detail</button>
                </ItemTemplate>
            </asp:TemplateField>

输出是：

应该在这里营业

Answer 1

尝试像这样写position: { my: "right center", at: "right center"}：

function ShowDialog(id) {

        var x = $('btn_' + id).position();

        $("#dialog_" + id).dialog({
            title: "Description",
            position:{ my:"" },
            autoOpen: false,
            show: {
                effect: "blind",
                duration: 1000
            },
            hide: {
                effect: "explode",
                duration: 1000
            },
            position:
                 { my: "right center", at: "right center", of: window }  // here
        });

        var theDialog = $("#dialog_" + id);
        theDialog.dialog("open");

    }