Javascript 按钮上方的弹出式定位

我在屏幕右下角有一个用jQuery Mobile制作的不可点击按钮。我试图让我的弹出窗口显示在顶部或略高于此按钮的左侧

目前，我正在尝试测试jQuery mobile的定位功能window、origin或#myelement。不管我选择哪种方法，弹出窗口总是在屏幕中间弹出窗口。我不确定我做错了什么，因为我相信我正确地遵循了这些例子

这是我的密码：

<div class="StatusButtons">
<a href="#CS_popup" data-rel="popup" data-position-to="origin" data-icon="GhCsStatus-Red" data-inline="true" data-mini="true" data-role="button" id="GhCsStatus_CS" style="display: none; pointer-events: none;">CS</a>
<a href="#GH_popup" data-rel="popup" data-position-to="origin" data-icon="GhCsStatus-Red" data-inline="true" data-mini="true" data-role="button" id="GhCsStatus_GH" style="display: none; pointer-events: none;">GH</a>
</div>  

<div id="GH_popup" data-role="popup" >
    <p> GH is OFF! </p>
</div>

<div id="CS_popup" data-role="popup" >
    <p> CS is OFF! </p>
</div>


<script type="text/javascript" >
    $(document).ready(function () { GrabGhCsStatus(); });

    var CScount = 0;
    var GHcount = 0;
    var GHCScount = 0;

    function GrabGhCsStatus() {
        var url = '@Html.Raw(Url.Action("index","GhCsStatus"))';
        $.get(url, function (data) {
            if (data.CheckIfCsIsRunning == 1) {
                $('#GhCsStatus_CS').show();
                if (data.CsStatus == 0) {
                    $('#GhCsStatus_CS').buttonMarkup({ icon: 'GhCsStatus-Red' });
                    if (CScount == 0) {
                        $('#CS_popup').popup("open");
                        CScount = 1;
                    }
                }
                else {
                    $('#GhCsStatus_CS').buttonMarkup({ icon: 'GhCsStatus-Green' });
                    CScount = 0;
                    //alert("CS:1/green");
                }
            }
            else {
                $("#GhCsStatus_CS").remove();
            }

            if (data.CheckIfGhIsRunning == 1) {
                $('#GhCsStatus_GH').show();
                if (data.GhStatus == 0) {
                    $('#GhCsStatus_GH').buttonMarkup({ icon: 'GhCsStatus-Red' });
                    if (GHcount == 0) {
                        $("#GH_popup").popup("open");
                        GHcount = 1;
                    }
                }
                else {
                    $('#GhCsStatus_GH').buttonMarkup({ icon: 'GhCsStatus-Green' });
                    GHcount = 0;
                }
            }
            else {
                $("#GhCsStatus_GH").remove();
            }
            // Set timeout, if CS or GH is enabled.
            if (data.CheckIfCsIsRunning == 1 || data.CheckIfGhIsRunning == 1) {
                window.setTimeout(GrabGhCsStatus, 5000); //120000); // 2 minutes
            }
        }, "json");
    }
</script>

GH关了

CS关了

$（document）.ready（函数（）{GrabGhCsStatus（）；}）；
var-CScount=0；
var-GHcount=0；
var GhcCount=0；
函数GrabGhCsStatus（）{
var url='@Html.Raw（url.Action（“index”，“GhCsStatus”））；
$.get（url、函数（数据）{
if（data.CheckIfCsIsRunning==1）{
$（'GhCsStatus_CS'）.show（）；
如果（data.CsStatus==0）{
$（'GhCsStatus'u CS'）。按钮标记（{icon:'GhCsStatus Red'}）；
如果（CScount==0）{
$（'CS#u popup'）。popup（“打开”）；
CScount=1；
}
}
否则{
$（'GhCsStatus'u CS'）。按钮标记（{icon:'GhCsStatus Green'}）；
CScount=0；
//警报（“CS:1/绿色”）；
}
}
否则{
$（“#GhCsStatus_CS”）.remove（）；
}
如果（data.CheckIfGhIsRunning==1）{
$（'GhCsStatus_GH'）.show（）；
如果（data.GhStatus==0）{
$（'GhCsStatus'u GH'）。按钮标记（{icon:'GhCsStatus Red'}）；
如果（GHcount==0）{
$（“#GH#U弹出窗口”）。弹出窗口（“打开”）；
GHcount=1；
}
}
否则{
$（'GhCsStatus'u GH'）。按钮标记（{icon:'GhCsStatus Green'}）；
GHcount=0；
}
}
否则{
$（“#GhCsStatus_GH”）.remove（）；
}
//如果启用CS或GH，则设置超时。
if（data.CheckIfCsIsRunning==1 | | data.CheckIfGhIsRunning==1）{
setTimeout（GrabGhCsStatus，5000）；//120000）；//2分钟
}
}“json”）；
}

以下是我的项目代码jist的JSFIDLE：

我似乎无法在JSFIDLE中重新创建错误。此错误仅发生在我的代码中。我试图简化JSFIDLE中的代码，但它似乎工作正常。然而，在我的项目中，它不能正常工作

---

如果还需要什么，请随意索取更多！谢谢

请提供一个可工作的JSFIDLE。@此项目中的Omar“我的”按钮不应被单击。它们实际上只是通知图标=/