Making a popup to open at the position where the mouse is clicked

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

The code for rendering a pop-up in my web looks like this. How can change the position to make it pop-up on a clicked position? How do I have to change my position: part?

Answer 1

try this code

$(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>