Javascript-форум - Как сделать акардеон в которому выезжающий блок можно было закрыть!

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Как сделать акардеон в которому выезжающий блок можно было закрыть! (https://javascript.ru/forum/jquery/36932-kak-sdelat-akardeon-v-kotoromu-vyezzhayushhijj-blok-mozhno-bylo-zakryt.html)

Как сделать акардеон в которому выезжающий блок можно было закрыть!

Добрый день.

Помогите сделать акардеон такой что бы при НАВЕДЕНИИ на блок выезжаел другой блок с текстом, который можно было закрывать при нажатии на крестик!
Пример нарисованная картинка:

Цитата:

Сообщение от olehpdatu

сделать акардеон такой что бы при НАВЕДЕНИИ на блок выезжаел другой блок с текстом, который можно было закрывать при нажатии на крестик!

Как вариант...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
html,
body {
	height: 100%;
}
.container {
	position: relative;
	width: 80%;
	height: 50%;
	margin-left: auto;
	margin-right: auto;
	background-color: yellow;
}
.text {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 80%;
	overflow: auto;
	color: #ffffff;
	background-color: blue;
	display: none;
}
.text > button {
	position: absolute;
	top: 0;
	right: 0;
	width: 20px;
	height: 20px;
}
</style>
<script type="text/javascript">
$(document).ready(function (){
	$('.container').mouseover(function (){
		var o=$(this).find('.text');
		if (o.hasClass('on')) return;
		o.slideDown();
		o.addClass('on');
	});
	$('.text > button').click(function (){
		var o=$(this.parentNode);
		o.slideUp();
		setTimeout(function (){
			o.removeClass('on');
		},300);
	});
});
</script>
</head>
<body>
<div class='container'>
	<div class='text'>
		<p>
			Служба Яндекс.Рефераты предназначена для студентов и школьников, 
			дизайнеров и журналистов, создателей научных заявок и отчетов — 
			для всех, кто относится к тексту, как к количеству знаков.
		</p>
		<button>X</button>
	</div>
</div>
</body>
</html>

Цитата:

Сообщение от ksa (Сообщение 243897)

Как вариант...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
html,
body {
	height: 100%;
}
.container {
	position: relative;
	width: 80%;
	height: 50%;
	margin-left: auto;
	margin-right: auto;
	background-color: yellow;
}
.text {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 80%;
	overflow: auto;
	color: #ffffff;
	background-color: blue;
	display: none;
}
.text > button {
	position: absolute;
	top: 0;
	right: 0;
	width: 20px;
	height: 20px;
}
</style>
<script type="text/javascript">
$(document).ready(function (){
	$('.container').mouseover(function (){
		var o=$(this).find('.text');
		if (o.hasClass('on')) return;
		o.slideDown();
		o.addClass('on');
	});
	$('.text > button').click(function (){
		var o=$(this.parentNode);
		o.slideUp();
		setTimeout(function (){
			o.removeClass('on');
		},300);
	});
});
</script>
</head>
<body>
<div class='container'>
	<div class='text'>
		<p>
			Служба Яндекс.Рефераты предназначена для студентов и школьников, 
			дизайнеров и журналистов, создателей научных заявок и отчетов — 
			для всех, кто относится к тексту, как к количеству знаков.
		</p>
		<button>X</button>
	</div>
</div>
</body>
</html>

сделайте плиз так что бы этот контейнер при закрытии 3 раза больше не выводился на странице пользователя....

:::::::::::::::::____________))))))))))))))

Как сделать так что-бы когда пользователь закрывает приблизительно 3 раза этот блок, он больше в этом браузери и этого дня не воспроизводится , так как на некоторой рекламе?:help: :) :write: