Показать сообщение отдельно
  #2 (permalink)  
Старый 23.07.2021, 15:21
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от Андрей812
как реализовать, чтобы не закрывался блок .help_content при нажатии на него
Как вариант...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
-->
<style>
.help_content {
background: green;
color: #fff;
}   
.close {
position: absolute;
right: 32px;
top: 32px;
width: 32px;
height: 32px;
opacity: 0.3;
}
.close:hover {
opacity: 1;
}
.close:before, .close:after {
position: absolute;
left: 15px;
content: ' ';
height: 33px;
width: 2px;
background-color: #333;
}
.close:before {
transform: rotate(45deg);
}
.close:after {
transform: rotate(-45deg);
}
</style>
<script>
</script>
</head>
<body>

    <div class="helptip-mod">БЛОК</div>
    <br/>
    <div class="helptip-mod">БЛОК2</div>
    <br/>
    <div class="helptip-mod">БЛОК3</div>
    <br/>

<script>
document.addEventListener("click",({target})=>{
	if (target.className != 'helptip-mod') return

	var resp='',rrp='';

	if(target.closest(".helptip-mod")){
		content=target.querySelector(".help_content"),
		otherСontent=document.querySelector(".helptip-mod .help_content");

		if(otherСontent&&otherСontent!=content)otherСontent.remove();

		if(content){
			content.remove();
			}else{
			var tt ='<ul><li>номер 1</li><li>номер 2</li><li>номер 3</li><li>номер 4</li></ul>';
			target.insertAdjacentHTML("beforeEnd",'<div class="help_content">'+tt+'<div class="close"></div></div>');
		}
	}

});
</script>


</body>
</html>
Ответить с цитированием