Среда, 30.07.2025, 16:45
Меню сайта
    Форма входа
    Категории раздела
    скрипты для ucoz сайта [3099]
    шаблоны для ucoz скачать [2660]
    Иконки групп для форума [25]
    Графика для сайта [1953]
    шаблоны psd для фотошопа [27]
    кисти для фотошопа [39]
    уроки фотошопа на русском языке [4]
    стили для фотошопа [3]
    шрифты для фотошопа cs4 [12]
    Web-master [3058]
    Поиск
    Календарь
    «  Апрель 2010  »
    Пн Вт Ср Чт Пт Сб Вс
       1234
    567891011
    12131415161718
    19202122232425
    2627282930
    Архив записей
    Наш опрос
    Умеете ли вы писать скрипты для ucoz?
    Всего ответов: 73
    Мини-чат
    200
    Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz
  • Статистика

    Онлайн всего: 3
    Гостей: 3
    Пользователей: 0
    Главная » 2010 » Апрель » 15 » Facebook in ucoz (Всплывающее окошко)
    17:45
    Facebook in ucoz (Всплывающее окошко)
    В этом скрипте показываеться работа окошка как на Facebook для Юкоз!

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

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

    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>  
    <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>  
    <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">  
    <p>  
    <b>О челе</b><br />Чел,придурок  
    </p>  
    <p></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>  
    <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>  
    <p> </tr>  
    </tbody>  
    </table>  
    </div>  
    </div>

    Вот и все.Наслаждайтесь. =)
    Категория: скрипты для ucoz сайта | Просмотров: 280 | Добавил: AntonJkeeee | Рейтинг: 0.0/0
    Всего комментариев: 0
    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]