1. CSS
.panel {
padding: 10px 20px 10px;
position: relative;
border: 1px solid #e1e1e1;
text-align: justify;
margin: 0 0 5px 0;
background: #f9f9f9;
-webkit-border-radius: 5px;
}
.close {
position: absolute;
width: 16px;
height: 16px;
top: 10px;
right: 10px;
cursor: pointer;
background-image: url(close.gif);
}
2. Подключение jQuery
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
3. JavaScript
<script type="text/javascript">
$(document).ready(function(){
$(".panel .close").click(function(){
$(this).parents(".panel").animate({ opacity: 'hide' }, "slow");
});
});
</script>
4. HTML
<div class="panel">
<h3>Материал из Википедии — свободной энциклопедии</h3>
<p>Квазар (англ. quasar) — особо мощное и далёкое активное ядро галактики. Квазары являются одними из самых ярких объектов во Вселенной — их мощность излучения иногда в десятки и сотни раз превышает суммарную мощность всех звёзд таких галактик, как наша. Следы родительских галактик вокруг квазаров (причём, далеко не всех) были обнаружены лишь позднее. В первую очередь квазары были опознаны как объекты с большим красным смещением, имеющие электромагнитное излучение (включая радиоволны и видимый свет) и настолько малые угловые размеры, что в течение нескольких лет после открытия их не удавалось отличить от «точечных источников» — звёзд (напротив, протяжённые источники больше соответствуют галактикам).</p>
<span class="close"></span>
</div>
5. Изображение