将对话框定位在 ASP.Net C# 中的按钮单击上答案

【问题标题】：Postion the dialog on button click in ASP.Net C#将对话框定位在 ASP.Net C# 中的按钮单击上
【发布时间】：2016-08-27 08:14:24
【问题描述】：

我在页面的不同位置有几个按钮。我想将对话框定位在单击鼠标的位置上。以下是在窗口上的定位。如何在我的按钮鼠标点击位置定位？

<script type="text/javascript">
    $("[id*=btnPopup]").live("click", function () {
        $("#dialog").dialog({
            dialogClass: "no-close",
            position: { my: "left top", at: "left top", of: window },
            buttons: {
                Close: function () {
                    $(this).dialog('close');
                }
            }
        });
        return false;
    });
</script>

<div id="dialog" style="display: none">
This is a simple popup
</div>
<asp:Button ID="btnPopup" runat="server" Text="Show Popup" />

【问题讨论】：

标签： javascript jquery asp.net jquery-ui

【解决方案1】：

您可以相对于被点击的按钮定位对话框。您还可以通过在left 或top 中加减来固定位置。它应该看起来像这样：

$('body').on('click', '.btn', function () {
    var $btn = $(this);
    $("#dialog").dialog({
        dialogClass: "no-close",
        position: { my: "left top", at: "left top", of: $btn },
        buttons: {
            Close: function () {
                $(this).dialog('close');
            }
        }
    });
})

.btn {
    margin: 100px 300px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link href='https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css' rel="stylesheet" ></link>

<button class="btn">Button</button>
<div id="dialog" style="display: none">
        This is a simple popup
</div>

【讨论】：

谢谢。我添加了但 $btn 不起作用。然后我添加了这样的位置： { my: "left+100 top+20", at: "left top", of: $('#btnPopup') } 它正在工作，但它没有放置在 left+100 top+20位置。它在左侧和顶部位置。我想在按钮点击位置。
@Raja 看看我添加的 sn-p。您正在使用已弃用的 live 方法，可能正因为如此，this 不指向点击目标。你应该使用事件委托，就像上面的例子一样，它做同样的事情，但更有效。