Допомога у програмуванні, відповіді на питання / Джейкері / встановити позицію курсору DIV фіксовано по центру внизу до цілі - jquery

встановити позицію курсору DIV фіксованим центром-дном для націлювання - jQuery

мої запитання - як показати елемент 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();
});
});

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

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>

Відповіді:

0 для відповіді № 1

Якщо ви хочете, щоб з'явився червоний div по центру внизу щодо вказівника миші, коли користувач клацає, ви повинні використовувати outerWidth() і outerHeight() який включає не тільки div ширину та висоту, але також padding:25px з вашого CSS.

Це також включало б ширину межі ...

І якщо ви здасте true як аргумент він включатиме поля.
;)

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

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>