设置光标位置DIV固定中心 - 底部到目标

Question

我的问题是如何显示div或box元素，位置固定中心 - 底部点击目标

示例：

<p>
  <button class="target-show">target show</button> 
  <button class="target-show">target show</button>
</p>

<hr><hr><hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr><hr><hr>

<div id="demo"></div>

<p>
  <button class="hidden-div">hidden div</button>
</p>

css：

p {
  text-align:center;
}
button {
  width : 50px;
}
#demo {
  display :none;
  padding : 25px;
  background : red ;
  width : 100px;
  height : 100px;
}

jquery：

$(function() {
    $(".target-show").click(function(e) {
        var target  =   $('.target-show');
            var div         =   $('#demo');
      var left      = e.clientX - target.width()/2;
      var top       = e.clientY - target.height()/2;
        div.css({'position': 'absolute', 'left': left, 'top': top}).show();
    });

      $(".hidden-div").click(function() { 
                $("#demo").hide();
        });
});

＆＃13;

＆＃13;

$(function() {
    $(".target-show").click(function(e) {
    	var target	=	$('.target-show');
			var div			=	$('#demo');
      var left		= e.clientX - target.width()/2;
      var top 		= e.clientY - target.height()/2;
        div.css({'position': 'absolute', 'left': left, 'top': top}).show();
    });
    
      $(".hidden-div").click(function() { 
    			$("#demo").hide();
    	});
});

＆＃13;

p {
  text-align:center;
}

button {
  width : 50px;
}

#demo {
  display :none;
  padding : 25px;
  background : red ;
  width : 100px;
  height : 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <button class="target-show">target show</button> 
  <button class="target-show">target show</button>
</p>

<hr><hr><hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr><hr><hr>

<div id="demo"></div>

<p>
  <button class="hidden-div">hidden div</button>
</p>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果您希望红色div在用户点击时相对于鼠标指针显示居中 - 底部，则必须使用outerWidth()和outerHeight()，其中不仅包括div宽度和高度，以及CSS中的padding:25px。

它还包括边框宽度......

如果您传递true作为参数，则会包含边距 ;）

＆＃13;

＆＃13;

$(function() {
  $(".target-show").click(function(e) {
    var div			=	$('#demo').show();
    var left		= e.clientX - (div.outerWidth()/2);
    var top 		= e.clientY - (div.outerHeight());
    div.css({'position': 'absolute', 'left': left, 'top': top}).show();
  });

  $(".hidden-div").click(function() { 
    $("#demo").hide();
  });
});

＆＃13;

p {
  text-align:center;
}

button {
  width : 50px;
}

#demo {
  display :none;
  padding : 25px;
  background : red ;
  width : 100px;
  height : 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <button class="target-show">target show</button> 
  <button class="target-show">target show</button>
</p>

<hr><hr><hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr><hr><hr>

<div id="demo"></div>

<p>
  <button class="hidden-div">hidden div</button>
</p>

＆＃13;

＆＃13;

＆＃13;