Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   div поверх текста p (https://javascript.ru/forum/dom-window/72822-div-poverkh-teksta-p.html)

linki 28.02.2018 20:54
div поверх текста p
 
На странице есть 5-7 p блоков c текстом.
Код:
<p id="p1">текст<br>текст<br>текст<br>текст</p>
...
<p id="p5">текст<br>текст<br>текст<br>текст</p>

При клике на текст - нужно создать div с надписью "скопировано" поверх и посередине текущего блока текста.

Код:
for (...) {     
  allp[i].onmouseup = function() {Clk(this);};
}
function Clk(id) {
  ...
}
В функцию Clk передается текущий id блока (p2, например).

На голом JS, без jQuery!

j0hnik 28.02.2018 21:15 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p{
			position: relative;
		}
	</style>
</head>
<body>

<p id="p1">текст<br>текст<br>текст<br>текст</p>
<p id="p5">текст<br>текст<br>текст<br>текст</p>
	
</body>
<script>
document.querySelectorAll('p').forEach(el=> el.onclick = e => e.target.insertAdjacentHTML('beforeend', '<div style="position:absolute; top:28px;left:-28px;">скопировано</div>'));

</script>
</html>

linki 02.03.2018 01:40
Большое спасибо!

Только есть нюансы.
1. при каждом клике - создается новый div, поверх текущего.
2. Нужно через 2 секунды спрятать блок.

А есть ли возможность создать один div и просто перемещать его поверх текущего p?


Часовой пояс GMT +3, время: 06:44.