Положение диалоговое окно на кнопку нажмите в ASP.Net C#

У меня есть несколько кнопок на разных местах на странице. Я хочу расположить диалоговое окно на кнопке click точно на том месте, где нажата моя мышь. ниже располагается на окне. Как расположить на мою кнопку мыши нажмите место?

<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" />

1 ответ

  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>