Время:
Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 18.220.200.33
Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.
  • Страница 1 из 1
  • 1
Facebook in ucoz (Всплывающее окошко)
Сообщение оставлено 04.08.2010 в 01:31:14 | Сообщение #1


В этом скрипте показываеться работа окошка как на Facebook для Юкоз!

Javascript который находиться в архиве (скачайте архив и закачайте на свой сайт,без создания каких либо папок)

1)Данный код необходимо вставить между тегами .

Code
<script type="text/javascript" src="/Facebok-in-ucoz.js"></script>    
<script type="text/javascript">    
window.addEvent('domready',function() {    
/* hide using opacity on page load */    
$('fb-modal').setStyles({    
opacity:0,    
display:'block'    
});    
/* hiders */    
$('fb-close').addEvent('click',function(e) { $('fb-modal').fade('out'); });    
window.addEvent('keypress',function(e) { if(e.key == 'esc') { $('fb-modal').fade('out'); } });    
$(document.body).addEvent('click',function(e) {    
if($('fb-modal').get('opacity') == 1 && !e.target.getParent('.generic_dialog')) {    
$('fb-modal').fade('out');    
}    
});    
/* click to show */    
$('fb-trigger').addEvent('click',function() {    
$('fb-modal').fade('in');    
});    
});    
</script>

2)Следующий код вставьте в Таблицы стилей (CSS)

Code
/* from facebook */    

.generic_dialog { height:0; left:0; overflow:visible; position:fixed; /*dw*/ top:0; width:100%; z-index:101; }    
#generic_dialog_iframe { left:0; position:absolute; top:0; z-index:3; }    
.generic_dialog .generic_dialog_popup { height:0; overflow:visible; position:relative; }    
.generic_dialog div.dialog_loading { background-color:#F2F2F2; border:1px solid #606060; font-size:24px; padding:10px; }    
#generic_dialog_overlay { display:block; left:0; position:absolute; top:0; width:100%; z-index:100; }    
.dialog_body .dialog_content_img { float:left; margin-right:15px; }    
.dialog_body .dialog_content_txt { float:left; padding-bottom:5px; width:300px; }    
.dialog_body .dialog_content_body { padding-bottom:13px; }    
.dialog_body .form_label { padding-right:5px; }    
.dark_dialog_overlay { background-image:url(/2.png); background-repeat:repeat; }    
* html .dark_dialog_overlay { background-color:transparent; background-image:url(/blank.gif); }    
.full_bleed .pop_dialog_table td.pop_content .dialog_body { padding:0; }    
table.pop_dialog_table { border-collapse:collapse; direction:ltr; margin:auto; table-layout:fixed; width:465px; }    
td.pop_topleft, td.pop_topright, td.pop_bottomleft, td.pop_bottomright { height:10px; overflow:hidden; padding:0 !important; width:10px !important; }    
td.pop_topleft { background:transparent url(/1.png) no-repeat scroll 0 0; }    
td.pop_topright { background:transparent url(/1.png) no-repeat scroll 0 -10px; }    
td.pop_bottomleft { background:transparent url(/1.png) no-repeat scroll 0 -20px; }    
td.pop_bottomright { background:transparent url(/1.png) no-repeat scroll 0 -30px; }    
td.pop_top, td.pop_bottom { background:transparent url(/1.png) repeat-x scroll 0 -40px; }    
td.pop_side { background:transparent url(/1.png) repeat-y scroll -10px 0; }    
td.pop_content { background-color:white; direction:ltr; padding:0; }    
.pop_dialog_rtl td.pop_content { direction:rtl; }    
td.pop_content h2.dialog_title { background:#6D84B4 none repeat scroll 0 0; border:1px solid #3B5998; color:white; font-size:14px; font-weight:bold; margin:0; }    
td.pop_content h2.dialog_loading { background:#6D84B4 url(/3.gif) no-repeat scroll 400px 10px; padding-right:40px; }    

td.pop_content h2 span { display:block; padding:4px 10px 5px; }    
td.pop_content .dialog_content { background:#FFFFFF none repeat scroll 0 0; border-color:#555555; border-style:solid; border-width:0 1px 1px; }    
td.pop_content .dialog_body { border-bottom:1px solid #CCCCCC; padding:10px; }    
td.pop_content .dialog_summary { background:#F2F2F2 none repeat scroll 0 0; border-bottom:1px solid #CCCCCC; padding:8px 10px; }    
td.pop_content .dialog_buttons { background:#F2F2F2 none repeat scroll 0 0; padding:8px; text-align:right; }    
td.pop_content .dialog_buttons input { margin-left:5px; }    
td.pop_content .dialog_buttons_msg { float:left; padding:5px 0 0; }    
td.pop_content .dialog_footer { background:#F2F2F2 none repeat scroll 0 50%; }    

/* david walsh custom */    

#fb-modal { display:none; }    
#fb-close { cursor:pointer; }    
.info { width:280px; float:left; font-size:11px; color:#666; }    
.info b { color:#000; }    
.image { width:200px; float:left; margin-right:10px; }

3)А вот код который показывает окно:

Code
<div class="generic_dialog" id="fb-modal">    
<div class="generic_dialog_popup" style="top: 125px;">    
<table class="pop_dialog_table" id="pop_dialog_table" style="width: 532px;">    
<tbody>    
<tr>    
<td class="pop_topleft"/>    
<td class="pop_border pop_top"/>    
<td class="pop_topright"/>    
</tr></p>    

<tr>    
<td class="pop_border pop_side"/>    
<td id="pop_content" class="pop_content">    
<h2 class="dialog_title"><span>Человек</span></h2>    
<div class="dialog_content">    
<div class="dialog_summary">Это окошко пригодиться в социальных сетях.</div>    
<div class="dialog_body">    
<div class="ubersearch search_profile"></p>    

<div class="result clearfix">    
<div class="image">    
<span><img class="photo" alt="Изображение" src="http://s40.ucoz.net/img/fr/ic/4/online.gif"/></span>    
</div>    
<div class="info">    

     
<b>О челе</b>
Чел,придурок    
</p>    

</p>    

Я люблю юкоз.    
</p>    
</div>    
<div class="clear" style="clear:both;"></div>    
</div>    
</div>    
</div>    
<div class="dialog_buttons">    
<input type="button" value="Закрыть окно" name="close" class="inputsubmit" id="fb-close" /></p>    

</div>    
</div>    
</td>    
<td class="pop_border pop_side"/>    
</tr>    
<tr>    
<td class="pop_bottomleft"/>    
<td class="pop_border pop_bottom"/>    
<td class="pop_bottomright"/></p>    

</tr>    
</tbody>    
</table>    
</div>    
</div>

Вот и все.Наслаждайтесь. =)



 Сообщение отредактировал Ashot - Среда, 04.08.2010, 23:23:10
 
 
   
Сообщение оставлено 04.08.2010 в 18:44:59 | Сообщение #2
Ashot, на ссылку посмотрите wink , поправь
 
 
   
Сообщение оставлено 04.08.2010 в 23:23:49 | Сообщение #3
leonP4, если ты о том что я подумал, то исправил, теперь открывается просто депозит (А то был сайт где я скрипты натырил) happy
 
 
   
  • Страница 1 из 1
  • 1
Поиск:
 
Графика от: Megas, GraFOS | Дизайн сверстал E.A.
Хостинг от uCoz
Яндекс.Метрика