Форум

linki · #1 (**permalink**) 28.02.2018, 20:54

На странице есть 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 · #2 (**permalink**) 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 · #3 (**permalink**) 02.03.2018, 01:40

Большое спасибо!

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

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

Форум

Справочник

Discord чат

Курсы javascript