Смысл - при наведении на название темы на главной страницы всплывает окошко с содержимым сообщения. Взят с qssupport.ru (там же можно посмотреть, как это работает).
В хтмл-верх:
Код:
<div id="modal-m" class="m-message" style="top: 740px; display: none;">
<div class="main-container">
<span class="name-author"><strong></strong> написал(а):</span>
<span class="p-messages"></span>
</div>
</div>
<script type="text/javascript">
(function($){
$(function(){
var $punMain = $('#pun-main')
,$modal = $('#modal-m')
,postsCache = {};
if (!$punMain.length) return;
var popupContent = function(topicId) {
if (typeof topicId == 'undefined') return;
if (typeof postsCache[topicId] == 'undefined') return;
var userName = postsCache[topicId]['author'].replace(/mybb@mybb.ru \((.*)\)/, "$1");
var postContent = postsCache[topicId]['title'];
$modal.find('.name-author strong:first').html(userName);
$modal.find('.p-messages').html(postContent);
};
$('.category .tcr a').hover(function(){
var link = $(this).attr('href');
var topicId = /\?id=(\d+)/.exec(link)[1];
$modal.css('top', $(this).offset().top+25).show();
$modal.find('.p-messages').html('<img src="http://q2.qsdb.ru/ajax-loader.gif" alt="Загружаю" />');
if (typeof postsCache[topicId] == 'undefined') {
$.get('/export.php', {type: 'rss', tid: topicId}, function(data){
if (data) {
postsCache[topicId] = {
title: $(data).find('channel').find('item:first').find('description').text(),
author: $(data).find('channel').find('item:first').find('author').text()
};
popupContent(topicId);
}
});
} else popupContent(topicId);
}, function(){
$modal.hide();
});
});
})(jQuery);
</script>Во второе окно своего стиля:
Код:
#modal-m {width: 250px; height: 155px; background: #eee; box-shadow: 0 0 8px #777; opacity: 0.9; position: absolute; border-left: 10px solid #80c3f4; padding: 10px; right: 70px;}
#modal-m span {display: block; font-family: verdana;}
.name-author {width: 100%; height: 14px; margin-bottom: 15px; color: #05a1f0;}
.p-messages {height: 120px; color: #555; max-height: 120px; overflow: hidden; margin-bottom: 10px;}
.p-messages img {max-height: 60px;}

Эпиграф в стиле tumblr (перевод windymind)























