Comp-Star » DataLife Engine » Разное DLE » Черное Модальное окно
Информация к новости
  • Просмотров: 1704
  • Автор: Compstar
  • Дата: 10-07-2013, 17:13
  • 68
10-07-2013, 17:13

Черное Модальное окно

Категория: DataLife Engine » Разное DLE

Черное Модальное окно

 

Черное Модальное окно, которое заменяет стандартное окно всплывающего профиля на новый, как на скрине, украдено с zp.
На обычное окно заменяется такое, оно появляется при клике рядом с ссылкой на профиль, на который кликнули. Если ссылка сверху, то он будет снизу, если снизу, то наоборот.

Установка:
1. Из папки upload закинуть файлы (в ваш каталог, не забываем изменить названия шаблона)
2. Добавить в любой js файл:

function showUserHint(username,obj){ShowLoading("");$.get(dle_root+"engine/ajax/profile.php",{name:username,skin:dle_skin,tpl:"userhint"},function(data){HideLoading("");ShowHintDialog(data,obj,true);});}
function ShowHintDialog(data,object,showClose){$("body").unbind("click");if(!showClose){var showClose=false;}
var closeBtn="";if(showClose){closeBtn='<a href="#" onclick="HideHintDiaog(); return false;" style="display:block; font-size:0px; position:absolute; top:3px; right:3px; z-index:100;"><img src="/templates/'+dle_skin+'/images/close_popup.png" alt="X" /></a>';}
$(".popupHintOut").remove();$("body").append('<div class="popupHintOut" style="position:absolute; top:0px; left:0px; display:none;">'+closeBtn+'<div class="popupHintArrow"></div><div class="popupHintIn">'+data+'</div></div>');var hintWidth=$(".popupHintOut").width();var hintHeight=$(".popupHintOut").height();var scrollTop=$(window).scrollTop();var windowWidth=$(window).width();var windowHeight=$(window).height();var objPosLeft=$(object).offset().left;var objPosTop=$(object).offset().top;var arrowWidth=48;var arrowHeight=10;if((hintHeight+arrowHeight+50)<(objPosTop-scrollTop)){$(".popupHintOut .popupHintArrow").addClass('arrowBottom').css({left:"4px"});var positionTop=objPosTop-hintHeight-arrowHeight-14;}else{$(".popupHintOut .popupHintArrow").addClass('arrowTop').css({left:"4px"});var positionTop=objPosTop+arrowHeight+$(object).height();}
if((objPosLeft+hintWidth+100)<windowWidth){var positionLeft=Math.round(objPosLeft-((arrowWidth-$(object).width())/2)-4);}else{var positionLeft=Math.round(objPosLeft-hintWidth+arrowWidth-((arrowWidth-$(object).width())/2)-4);$(".popupHintOut .popupHintArrow").css({left:"auto",right:"4px"});}
$(".popupHintOut").css({top:positionTop+"px",left:positionLeft+"px"}).fadeIn('normal');setTimeout(function(){$("body").unbind("click").bind("click",function(e){e=e||window.event;var target=e.target||e.srcElement;while(target){if(target==$(".popupHintOut").get(0))
return;target=target.parentNode;}
$(".popupHintOut").fadeOut('normal',function(){$(this).remove();});$("body").unbind("click");});},100);}
function HideHintDiaog(){$(".popupHintOut").stop(true,true).fadeOut('normal',function(){$(this).remove();});$("body").unbind("click");}

3. В стили добавить:

.popupHintOut {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
    left: 0;
    padding: 7px;
    position: absolute;
    top: 0;
    z-index: 99999;
}
.popupHintOut .popupHintIn {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 2px 2px 2px 2px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
}
.popupHintOut .popupHintArrow {
    height: 16px;
    left: 0;
    position: absolute;
    top: 0;
    width: 48px;
    z-index: 99;
}
.popupHintOut .popupHintArrow.arrowBottom {
    background: url("../images/popup-arrow-down.png") no-repeat scroll center bottom transparent;
    bottom: -9px;
    top: auto;
}
.popupHintOut .popupHintArrow.arrowTop {
    background: url("../images/popup-arrow-top.png") no-repeat scroll center top transparent;
    top: -9px;
}

4. Для того, чтобы появлялось именно это окно, в файлах (например это есть во всех файлах вывода новостей, в pm, в чате) где есть тег {author}, заменяем тег:

$tpl->set( '{author}', "<a onclick="ShowProfile('" . urlencode( $row['autor'] ) . "', '" . $go_page . "', '" . $user_group[$member_id['user_group']]['admin_editusers'] . "'); return false;" href="" . $go_page . "">" . $row['autor'] . "</a>" );

На этот:

$tpl->set( '{author}', "<a onclick="showUserHint('" . urlencode( $row['autor'] ) . "', this); return false;" href="" . $go_page . "">" . $row['autor'] . "</a>" );

 

Внимание! У вас нет прав для просмотра скрытого текста.




0

  • Шаблон Android Life DLE 10.0
      Тематика: мобильная, androidРазработчик: Test-TemplatesТип шаблона: оригиналДля версии DLE: 9.8-10.0
  • Шаблона BeautyPlace DLE 10.0
      Красивый универсальный варез шаблон для DataLife Engine. Отлично подходит для варезных сайтов.
  • Шаблон Builderman DLE 10.0
      Тематика: строительная, бизнесРазработчик: Test-TemplatesТип шаблона: оригиналДля версии DLE: 10.0
  • Хак AJAX загрузка новостей и комментариев
      Сейчас технология AJAX(загрузка контента без обновления страницы), стала уже не простой игрушкой, а
  • Шаблон Firstnews для DLE 9.8
      Новостной шаблон для DataLife Engine. Удобная структура блоков, легко изменить цветовую гамму. В

Метки к статье: Разное DLE

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.