修复弹出窗口（对话框）

Question

<div data-bind="style: { display: !koIsHidden() ? 'inline-block' : 'none'}">
    <button id="hideButton" type="button" title="Hide" onclick="javascript:openJuiPopup('#hidePopup')" style="background: none; border: none">
        <i id="hideCross"class="fa fa-2x fa-times"  data-bind="attr: { 'data-applicationKey': application.applicationKey }"></i>
    </button>
</div>

<div id="hidePopup" class="popup ui-content" data-role="popup">
    <!-- ko foreach: { data: previewApplications()[0], afterRender: renderPopup} -->
    <form id="hideForm" data-bind="attr: {action: '@(MVC.GetLocalUrl(MVC.HireOrgJobApplication.ViewApplication(Model.CurrentOrganization.CustomUrl, Model.Job.JobKey, "xxx/ajax-hide")))'.replace('xxx', application.applicationKey)}" method="post" style="display:inline;">
        @Html.AntiForgeryToken()
        <input type="hidden" name="ApplicationKey" data-bind="attr:{ value : application.applicationKey }"  />

        <h4 data-bind="text: application.hideButtonSendRejectionInsteadOfHide ? 'Reject' : 'Hide'"></h4>
        <div>
            <label>
                <input type="checkbox" class="currentCheckbox" name="SendRejectionToCandidate" value="true" data-bind="checked: application.hideButtonSendRejectionInsteadOfHide" />
                <input name="SendRejectionToCandidate" type="hidden" value="false" />
                Send a rejection to the applicant
            </label>
            &nbsp;<i class="fa fa-question-circle jui-tooltip" title="Checking this will send a polite email to the applicant that they have been passed on the application.  No reason will be given in the email. It is a courtesy to let applicants know when they have been passed on."></i>
        </div>

        @foreach (var x in DreamHireDataClassesDataContext.NewInstance.ApplicationHiddenReasons.Where(o => o.IsVisible).OrderBy(o => o.SortOrder).ToList())
        {
            <div class="radio">
                <input type="radio" name="HideReasonId" value="@x.Id" id="@x.Id">
                <label for="@x.Id">
                    <i class="fa fa-lg fa-times-circle"></i> @x.ReasonText
                </label>
            </div>
        }
        <div class="text-right">
            <button id="hider" type="submit" class="btn btn-danger jui-tooltip" data-bind="text: application.hideButtonSendRejectionInsteadOfHide === true ? 'Reject' : 'Hide', attr: { title: application.hideButtonSendRejectionInsteadOfHide === false ? 'Reject' : 'Hide'}"></button>
        </div>
    </form>
    <!--/ko-->
</div>

当我单击第一个代码上的按钮时，应该出现弹出窗口（第二个代码）。

但这个位置出乎意料。

我的JS代码如下：

            $("#hidePopup").dialog({
                dialogClass: "no-close",
                position: { my: "middle top", at: "middle bottom", of: $("#hideCross") },
                autoOpen: false,
                draggable: true,
            }).dialog("widget").find(".ui-dialog-titlebar").hide();

我很确定这应该在理论上正常运作，但事实并非如此。 有什么帮助吗？