• Страница 1 из 1
  • 1
Форум » Всё для Ucoz » Скрипты (Мини-чат) » Мини чат в модальном окне by Fallen для Ucoz.
Мини чат в модальном окне by Fallen для Ucoz.
METRO2033
Группа: Проверенный
Собщений: 580
Репутация: 50
Наград: 5
Замечания : 0%
# 1 10:41

Особенности:
1) Закруглены поля сообщения
2) Плавная подсветка иконок управления при наводке
3) Красивый дизайн
4) Тень при наводке на мини чат

Установка:

Для начала давайте зададим оформление нашего чата

1) В самый верх вашего css:

Code
/* Chat */
.cMessage {text-shadow: black 1px 1px 2px;background: #454545;padding: 10px 5px 10px 5px;color:ddd;-webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5x; border-radius: 5px;border-top: solid 1px #565656; border-left: solid 1px #565656; border-bottom: solid 1px #343434; border-right: solid 1px #343434;}
.cBlock1 {text-shadow: black 1px 1px 2px;background: #454545;padding: 10px 5px 10px 5px;color:ddd;-webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5x; border-radius: 5px;border-top: solid 1px #565656; border-left: solid 1px #565656; border-bottom: solid 1px #343434; border-right: solid 1px #343434;}
.cBlock2 {text-shadow: black 1px 1px 2px;background:url(http://ucoz-studio.at.ua/shablon/bor5.png);padding: 10px 5px 10px 5px;color:ddd;-webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5x; border-radius: 5px;border-top: solid 1px #565656; border-left: solid 1px #565656; border-bottom: solid 1px #343434; border-right: solid 1px #343434;}
.mchat {text-shadow: black 1px 1px 2px;background:white;padding: 2px 5px 2px 5px;color:ddd;-webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5x; border-radius: 5px;border-top: solid 1px #565656; border-left: solid 1px #565656; border-bottom: solid 1px #343434; border-right: solid 1px #343434;}
.chatWindow {padding: 10px 10px 10px 10px;color:ddd;-webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5x; border-radius: 5px;border-top: solid 1px #565656; border-left: solid 1px #565656; border-bottom: solid 1px #343434; border-right: solid 1px #343434;}
.chatWindow:hover {box-shadow: 5px 5px 5px 5px black;-webkit-box-shadow:5px 5px 5px 5px black;-moz-box-shadow:5px 5px 5px 5px black;}
/* ------------- */


2) Вид материалов Мини-чата:

Code
<div style="width:100%">
<div class="cBlock2" style="padding:0 4px 5px 2px;margin-bottom:3px;">
<div style="float:right;font-size:10px;" title="$DATE$"><font color="black"><b>$TIME$</b></font></div>
<a title="Цитировать $NAME$" href="javascript:void('Apply to')" onclick="parent.window.document.getElementById('mchatMsgF').focus();parent.window.document.getElementById('mchatMsgF').value+='[color=red]$NAME$[/color], ';return false;"><img src="/shablon/icons/chat/quote.png" border="0"></a><b><a href="$PROFILE_URL$" title="Профиль $NAME$"><font color="white">$NAME$</font></a></b>
<div class="cMessage">($USER_ID$='1'))?><font color="yellow">$MESSAGE$</font><font color="white">$MESSAGE$</font></div>
</div></div>


3) Форма добавления сообщений чата:

Code
<div align="center"><a href="$LOGIN_LINK$">Для добавления необходима авторизация</a>Доступ запрещен</div>
<table border="0" cellpadding="1" cellspacing="1" width="100%">
<tr><td>$FLD_AUTOUPD$</td>
<td width="70%" align="right">
<a href="$RELOAD_URI$" title="Обновить"><img alt="" border="0" align="absmiddle" src="http://ucoz-studio.at.ua/shablon/icons/chat/ref.png" width="13" height="15" style="opacity: 0.5;" id="ref" onmouseover="fadeOpacity(this.id, 'oR1')" onmouseout="fadeOpacity.back(this.id)"></a>
<a href="$SMILES_URI$" title="Вставить смайл"><img alt="" border="0" align="absmiddle" src="http://ucoz-studio.at.ua/shablon/icons/chat/smile.png" width="13" height="15" style="opacity: 0.5;" id="smile" onmouseover="fadeOpacity(this.id, 'oR1')" onmouseout="fadeOpacity.back(this.id)"></a>
<a href="$BBCODES_URI$" title="BB-Коды"><img alt="" border="0" align="absmiddle" src="http://ucoz-studio.at.ua/shablon/icons/chat/bb.png" width="13" height="15" style="opacity: 0.5;" id="bb" onmouseover="fadeOpacity(this.id, 'oR1')" onmouseout="fadeOpacity.back(this.id)"></a>
<a href="$MSGCTRL_URI$" title="Управление сообщениями"><img alt="" border="0" align="absmiddle" src="http://ucoz-studio.at.ua/shablon/icons/chat/mcm.png" width="15" height="15" style="opacity: 0.5;" id="mcm" onmouseover="fadeOpacity(this.id, 'oR1')" onmouseout="fadeOpacity.back(this.id)"></a>
</td></tr></table>

<table border="0" cellpadding="1" cellspacing="1" width="100%">
<tr><td colspan="2">$FLD_NAME$</td></tr>
<tr><td width="50%">$FLD_EMAIL$</td><td>$FLD_URL$</td></tr>
</table>

<table border="0" cellpadding="1" cellspacing="1" width="100%">
<tr><td width="50%">$FLD_CUSTOM1$</td><td>$FLD_CUSTOM2$</td></tr>
</table>

<table border="0" cellpadding="1" cellspacing="1" width="100%">
<tr><td width="50%">$FLD_SECURE$</td><td align="right">$IMG_SECURE$</td></tr>
</table>

<table border="0" cellpadding="1" cellspacing="1" width="100%">
<tr><td align="center"><div style="font-size:10px;">Осталось символов: $LENGTH_COUNTER$</div></td></tr>
</table>

<table border="0" cellpadding="1" cellspacing="1" width="98%">
<tr><td width="98%" rowspan="2">$FLD_MESSAGE$</td>
</tr>
</table>

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td align="center"><input type="submit" value="ОК" class="mchat" id="mchatBtn" style="width:70px;"><img style="display:none;" id="mchatAjax" src="http://ucoz-studio.at.ua/shablon/icons/chat/ajax-loader.gif" border="0" width="10%"/></td></tr></table>

4) Теперь сделаем чтобы иконки чата светились при наводке

Code
<script type="text/javascript" src="http://ucoz-studio.at.ua/shablon/js/opacity.js"></script>
<script type="text/javascript">
fadeOpacity.addRule('oR1', .50, 1, 50);
</script>


С чатом, вроде как, разобрались, переходим к созданию модального окна!!!

1) В самый верх после вставляем

Code
<div id="mask"></div>

<script>
$(document).ready(function() {
$('a[name=modal]').click(function(e) {
e.preventDefault();
var top = $(this).offset().top
var id = $(this).attr('href');
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$('#mask').css({
'width':maskWidth,
'height':maskHeight
});
$('#mask').css('opacity', 0).show();
$('#mask').fadeTo(1000,0.75);
var winH = $(window).height();
var winW = $(window).width();
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
$(id).fadeIn(1000);
});

$('.window .close').click(function (e) {
e.preventDefault();
$('#mask').fadeOut(1000);
$('.window').fadeOut(500);
});

$('#mask').click(function () {
$(this).fadeOut(1000);
$('.window').fadeOut(500);
});

});
</script>

<style>
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
.window {
opacity:0.9;
position:fixed;
left:0;
top:0;
z-index:9999;
}
</style>

2) Окна подключили,теперь сделаем мини чат в модальном окне

Code

<!-- Mини чат by ucoz-studio.at.ua -->
<div id="static4" style="display:none;" class="window" align="center">
<table cellspacing="0" width="800" height="600">
<tr><td background="http://ucoz-studio.at.ua/shablon/modal_windows/modal_chat.png">

<table cellspacing="0" width="70%" align="center">
<tr><td>
<div class="chatWindow">
$CHAT_BOX$
</div>
</td></tr>
</table>

</td></tr>
</table>
</div>
<!-- Конец кода Mини чатa by ucoz-studio.at.ua -->

3) И последнее,ссылка каторая выводит окно с чатом

Code
<a href="#static4" name="modal">Mини чат</a>
Прикрепления: 2438725.png (49.8 Kb)
Форум » Всё для Ucoz » Скрипты (Мини-чат) » Мини чат в модальном окне by Fallen для Ucoz.
  • Страница 1 из 1
  • 1
Поиск: