Jquery 鼠标单击打开DIV-不显示在屏幕外

我再次遇到问题，我正在尝试在鼠标位置打开一个DIV。在我正在进行的项目中，这是打开一个定制的对话框。现在，我可以在鼠标位置打开DIV。但我有几个问题：

• 有时DIV会出现在容器外
• 无论何时打开firebug（不知道其他开发人员工具窗口），对话框都会部分隐藏在firebug后面

现在，我得到了这个代码：

HTML:

链接到JSFIDLE:

---

我不知道我的计算方法是否正确。

你为什么要把自己复杂化？我能给你一个简单的方法吗？使用CSS计算对话框的中心。专注于HTML操作：

$(function() {
  $(".first-link").click(function() {
        $(".content").append('<div class="new-dialog">Hello!</div>');
  });
});

.new-dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
}

$（函数（）{
$（“.first link”）。单击（函数（）{
$（“.content”）.append（'Hello！'）；
});
});
.新建对话框{
位置：绝对位置；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
背景色：#fff；
}

---

提琴：

我不需要它出现在内容的中心，而是在鼠标位置。@JoshuaBakker它应该随鼠标移动吗？不。基本上，我只需要在鼠标位置打开它，但它永远不应该离开屏幕或firebug下方（但它应该最接近鼠标位置）。移动由jQuery draggable完成。

$(document).ready(function() {
  $('.first-link').unbind('click').click(openDialog);
});

$(document).mousemove(function(e){
  window.mouseX = e.pageX;
  window.mouseY = e.pageY;
});

function openDialog(e) {
  var elem = $('<div class="dialog">hello</div>')
  $('.content').append(elem);

  var x = window.mouseX;
  var y = window.mouseY;

  var windowWidth = $('.content').width();
  var windowHeight = $('.content').height();

  var dialogWidth = $(elem).width();
  var dialogHeight = $(elem).height();

  var calc = windowWidth - (x + dialogWidth);

  if (calc < 0)
  {
    x += calc - 10;
  }

 calc = windowHeight - (y + dialogHeight);

  if (calc < 0)
  {
    y += calc - 20;
  }

  elem.draggable({containment: '.content'});
  elem.css('position', 'absolute').css('top', y).css('left', x);
}

body
{
  height: 500px;
}

.content
{
  border: 1px solid #000;
  height: 250px;
  width: 250px;
  overflow: auto;
  position: relative;
  resize: both;
}

.dialog
{
  min-height: 50px;
  width: 150px;
  border: 1px solid #000;
  padding: 5px;
  background-color: #fff;
  z-index: 2;
}

.first-link
{
  position: relative;
  top: 160px;
  left: 5px;
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

$(function() {
  $(".first-link").click(function() {
        $(".content").append('<div class="new-dialog">Hello!</div>');
  });
});

.new-dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
}