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

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();

在我的网页中，呈现弹出框的代码如下。 如何更改位置以使其在单击位置上弹出？ 我需要如何更改我的位置:部分？

- Dukakus17

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>

- Bhargav Chudasama

---

不处理在边缘点击的情况。 - GorvGoyl

Answer 2

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

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

以上代码将在点击位置打开您的对话框

- GaAd