Всплывающее окно на jQuery
Автор: wmaximum
Опубликовано: 660 дней назад (1 августа 2010)
Блог: Wmaximum
Рубрика: InstantCMS
Редактировалось: 1 раз — 1 августа 2010
+17↑
Голосов: 17
Так как многие посетители проекта его посещают, но не хотят регистрироваться я решил сделать надоедливое всплывающее окно, которое не отображается для зарегистрированных пользователей.

Для всего описанного ниже Вам понадобиться АРХИВ который нужно распаковать в корень используемого шаблона.

Далее все действия, коих совсем немного, будут проводиться над файлом template.php Вашего шаблона. Для начала подключим дополнение jQuery и используемый для окна стиль, для этого перед тегом </head> вставим:
Код PHP:
<script type="text/javascript" src="/templates/ВАШ ШАБЛОН/jquery.meerkat.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){	
	meerkat({
		close: '.close',
		dontShow: '.dont-show',
		animation: 'slide',
		animationSpeed: 500,
		dontShowExpire: 0,
		removeCookie: '.remove-cookie',
		meerkatPosition: 'bottom',
		background: '#2e2a22 url(/templates/ВАШ ШАБЛОН/images/meerkat-bg.png) repeat-x 0 0',
		height: '110px'
	});
	
});
</script>
ВАШ ШАБЛОН - нужно заменить на папку используемого шаблона.

Далее в самом низу, перед тегом </body> вставляем:
Код PHP:
<?php if ( !$inUser->id ) { ?>
<div style="position: fixed; width: 100%; height: 110px; bottom: 0pt; display: block; float: left;" id="meerkat-wrap"><div style="background: rgb(46, 42, 34) url(/templates/ВАШ ШАБЛОН/images/meerkat-bg.png) repeat-x scroll 0pt 0pt; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; height: 110px;" id="meerkat-container"><div style="display: block;" id="meerkat">
        <div id="meerkat-content-adsense" style="color: rgb(255, 255, 255);">
<p>Вы являетесь не зарегистрированным либо не авторизированным пользователем.</p>
<p>Для получения полноценного доступа ко всем функциям сайта, Вам необходимо проити процедуру <a href="/registration">РЕГИСТРАЦИИ</a> либо <a href="javascript:auth()">АВТОРИЗИРОВАТЬСЯ</a> используя свой логин и пароль</p>
	<a style="cursor: pointer;" class="close">Close</a>
		</div>
    </div></div></div><?php } ?>
Используемый мною текст можете заменить на любой другой, также не забываем заменить ВАШ ШАБЛОН на папку используемого шаблона.

Результатом всех приведенных выше действий будет всплывающее окно внизу:
← Социальные закладки | DLE Forum →
Теги: всплывающее окно, jquery
Комментарии (16)
Hmelex # 1 августа 2010 в 16:19 +2
Видела где то в сети, данный исходник - но так и не смогла никуда его применить - спасибо за решение.
+1
qwest # 1 августа 2010 в 17:36 +3
Содержанием интересным надо привлекать, а так можно и посетителей потерять.   look
wmaximum # 2 августа 2010 в 00:09 +3
Посетители есть, только активности от них никакой, тем более проект не для прибыли, а для души.

Городок то у нас совсем маленький, всего-то 13 000...
wmaximum # 2 августа 2010 в 00:16 +1
Вот разговор с одной из представительниц прекрасной половины человечества, жительницей нашего города.
wmaximum@qip.ru (23:09:54 1/08/2010)  сайт http://myzha.ru знаешь?
Яна Прокопчук (23:10:47 1/08/2010)  не-а, не знаю...  я сижу только тут, всети и на мыле.
wmaximum@qip.ru (23:11:05 1/08/2010)  уууу, интернет ограничен лишь социалками?

После последней мой фразы просто случился ступор.
sofcom # 1 октября 2011 в 21:46 0
Совет: обрежьте шапку сайта на внутренних страницах. Добавьте сайту практической пользы.
И еще
qwest # 2 августа 2010 в 01:01 +3
А вы попробуйте обьявление в местной газете подать на такомто сайте конкурс на самый глупый вопрос.
Приз флешка и я думаю посетителей активных прибавится.
wmaximum # 2 августа 2010 в 01:23 +1
Такие объявления в местной газете относятся к коммерческим и их стоимость просто не сопоставима с размерами самой газеты. А вот насчет флэшки идея неплохая.
Dimitrius # 2 августа 2010 в 16:36 +3
Мне кажется еще надо добавит вот эти стили в файл стилей шаблона
a.close {
position: absolute;
top: 7px;
right: 3px;
background: url(/templates/_default_/images/close-btn.png) no-repeat 0 0;
display: block;
height: 26px;
width: 26px;
text-indent: -9000px;
}

a.close-meerkat {
position: absolute;
top: 5px;
right: 3px;
background: #FFF;
border: 2px solid #FFF;
text-decoration: none;
padding: 0px 4px 1px 5px;
font-weight: bold;
font-size: 1.2em;
color: #71adb1;
}

a.close-meerkat:hover {
border: 2px solid #2e2a22;
color: #2e2a22;
}

#meerkat-container {
position: relative;
}

#meerkat {
width: 100%;
display: none;
}

#meerkat-content {
width: 960px;
margin: 0 auto;
padding-top: 10px;
}

#meerkat-content h1{
color: #FFF;
font-size: 3.8em;
}

#meerkat-content p{
color: #FFF;
font-size: 1.2em;
}

#meerkat-content a.dont-show{
color: #FFF;
font-weight: bold;
}

#meerkat-content a.dont-show:hover {
color: #FFF;
text-decoration: none;
}

#meerkat-content-adsense {
width: 730px;
margin: 0 auto;
padding-top: 10px;
}
wmaximum # 3 августа 2010 в 00:24 +2
Благодарю за дополнение, про CSS я как-то совсем забыл.
Anabiotick # 2 августа 2010 в 20:40 +3
Работает на ура. Штука полезная. Если сайт интересный и полезный, мало кто поленится зарегистрироваться. К тому же, вовсе никто не обязан устанавливать такую штуку у себяjoke. Кому подходит - поставит и будет благодарен автору, кому не нужно - и заморачиваться не станет :)
pasplus # 2 августа 2010 в 23:36 +3
Да работает на ура! Если сделать небольшое не навязщивае табло чуть чуть мешающее просмотру сайта то я думаю это не повредит. Лично я так думаю.СПАСИБО!
0 # 11 марта 2011 в 21:14 0
Нужная фишка, но вышибает iChat.Верх чата убивает.Как бы поправить?
Николай # 30 июня 2011 в 12:16 0
просто супер !!!!! отлично
arianfinist # 30 июня 2011 в 16:27 0
Главное то забыл фаила в архиве
jquery.meerkat.1.0.js
нет
arianfinist # 30 июня 2011 в 16:44 0
А и еще момент было б неплохо прописать в скрипт, чтоб при нажатии на "закрыть" все таки сессия закрытия сохранилась при переходе, например на новую страницу, а то так как то глупо