在鼠标点击的位置制作一个弹出窗口

Question

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

在我的网页中呈现弹出窗口的代码如下所示。如何更改位置以使其在单击的位置弹出？我该如何改变我的位置：部分？

Answer 1

试试这个代码

$(window).click(function(e) {
  $(".popup").css({left: e.pageX});
  $(".popup").css({top: e.pageY});
  $(".popup").show();
});

.popup {
  display: none;
  position: absolute;
  color: white;
  padding: 40px;
  border: solid 1px #ddd;
  background: green;
  text-align: center;
  width: 10%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popup" style="">
   Popup text...
</div>

Answer 2

据我了解，您想在单击的位置打开对话框。为了获得位置，您必须使用单击事件跟踪鼠标的位置，请参见下面的示例代码。

$(document).click(function (e) {
    $("#Dialogid").dialog("option", { position: [e.pageX, e.pageY] });
});

上面的代码将在单击位置打开对话框