集光标位置DIV固定中心底部的目标

Question

我的问题是如何显示股利或框元素与位置固定的中央底部单击目标

例如：

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

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

p { 
 
    text-align:center; 
 
} 
 

 
button { 
 
    width : 50px; 
 
} 
 

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

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

Answer 1

如果希望在用户点击，则必须使用outerWidth()和outerHeight()其不仅包括div宽度和红色div来出现中心底相对于鼠标指针高度，但也从您的CSS padding:25px。

这也将包括边框的宽度......

如果你传递一个true作为参数，它将包括边缘。
）

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

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

p { 
 
    text-align:center; 
 
} 
 

 
button { 
 
    width : 50px; 
 
} 
 

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

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