Смысл - при наведении на название темы на главной страницы всплывает окошко с содержимым сообщения. Взят с 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;}