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

Сообщение от 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, 02.04.2013 в 13:16.
Ответить с цитированием