1. CSS
.window {
border: solid 6px #343434;
background: #fff;
width: 200px;
height: 150px;
display: none;
}
.msg {
float: center;
font-weight: normal;
font-size: 11px;
}
2. Подключение MooTools
<script type="text/javascript" src="mootools.svn.js"></script>
Данный код размещаем в разделе
Скачать MooTools можно здесь.
3. JavaScript
<script type="text/javascript">
window.addEvent('domready', function(){
$$('#draggables div').each(function(drag){
new Drag.Move(drag);
});
$$('#draggables span a').each(function(o){
$(o).addEvents({'click' : function(event){
$(o.id+'_w').setStyle('display', 'none');
}
})
});
$$('#links a').each(function(o){
$(o).addEvents({'click' : function(event){
$(o.id+'_w').setStyle('display', 'block');}
})
});
});
</script>
JavaScript размещаем там же в
4. HTML
<div id="links">
<a href="#" id="block1">Клик для показа блока №1</a>
<a href="#" id="block2">Клик для показа блока №2</a>
</div>
<div id="draggables">
<div id="block1_w" class="window">
<span class="msg"><a href="#" id="block1">закрыть</a></span>
<p>Текст блока №1</p>
</div>
<div id="block2_w" class="window">
<span class="msg"><a href="#" id="block2">закрыть</a></span>
<p>Текст блока №2</p>
</div>
</div>
