Всплывающее окно на jQuery

+24
2.94K
Так как многие посетители проекта его посещают, но не хотят регистрироваться я решил сделать надоедливое всплывающее окно, которое не отображается для зарегистрированных пользователей.

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

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

Далее в самом низу, перед тегом </body> вставляем:
  1. <?php if ( !$inUser->id ) { ?>
  2. <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">
  3. <div id="meerkat-content-adsense" style="color: rgb(255, 255, 255);">
  4. <p>Вы являетесь не зарегистрированным либо не авторизированным пользователем.</p>
  5. <p>Для получения полноценного доступа ко всем функциям сайта, Вам необходимо проити процедуру <a href="/registration">РЕГИСТРАЦИИ</a> либо <a href="javascript:auth()">АВТОРИЗИРОВАТЬСЯ</a> используя свой логин и пароль</p>
  6. <a style="cursor: pointer;" class="close">Close</a>
  7. </div>
  8. </div></div></div><?php } ?>
Используемый мною текст можете заменить на любой другой, также не забываем заменить ВАШ ШАБЛОН на папку используемого шаблона.

Результатом всех приведенных выше действий будет всплывающее окно внизу:
Иллюстрация
+3
Hmelex Hmelex 11 лет назад #
Видела где то в сети, данный исходник - но так и не смогла никуда его применить - спасибо за решение.
+1
+3
qwest qwest 11 лет назад #
Содержанием интересным надо привлекать, а так можно и посетителей потерять. look
+3
wmaximum wmaximum 11 лет назад #
Посетители есть, только активности от них никакой, тем более проект не для прибыли, а для души.

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

После последней мой фразы просто случился ступор.
0
Dublic Dublic 10 лет назад #
Совет: обрежьте шапку сайта на внутренних страницах. Добавьте сайту практической пользы.
И еще
+3
qwest qwest 11 лет назад #
А вы попробуйте обьявление в местной газете подать на такомто сайте конкурс на самый глупый вопрос.
Приз флешка и я думаю посетителей активных прибавится.
+1
wmaximum wmaximum 11 лет назад #
Такие объявления в местной газете относятся к коммерческим и их стоимость просто не сопоставима с размерами самой газеты. А вот насчет флэшки идея неплохая.
+3
Димитриус Димитриус 11 лет назад #
Мне кажется еще надо добавит вот эти стили в файл стилей шаблона
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;
}
+2
wmaximum wmaximum 11 лет назад #
Благодарю за дополнение, про CSS я как-то совсем забыл.
+3
Anabiotick Anabiotick 11 лет назад #
Работает на ура. Штука полезная. Если сайт интересный и полезный, мало кто поленится зарегистрироваться. К тому же, вовсе никто не обязан устанавливать такую штуку у себяjoke. Кому подходит - поставит и будет благодарен автору, кому не нужно - и заморачиваться не станет :)
+3
pasplus pasplus 11 лет назад #
Да работает на ура! Если сделать небольшое не навязщивае табло чуть чуть мешающее просмотру сайта то я думаю это не повредит. Лично я так думаю.СПАСИБО!
0
11 лет назад #
Нужная фишка, но вышибает iChat.Верх чата убивает.Как бы поправить?
0
Николай Николай 10 лет назад #
просто супер !!!!! отлично
0
Александр Александр 10 лет назад #
Главное то забыл фаила в архиве
jquery.meerkat.1.0.js
нет
0
Александр Александр 10 лет назад #
А и еще момент было б неплохо прописать в скрипт, чтоб при нажатии на "закрыть" все таки сессия закрытия сохранилась при переходе, например на новую страницу, а то так как то глупо

Еще от автора

Случайные статьи от 17.10.2011
Вашему вниманию обновленная и доработанная версия модуля.
Случайные статьи (обновлено 17.10.2011)
Давно хотел реализовать у себя на сайте вывод случайных статей, но вывод не просто статей а оформить красивым блоком...
Карта города на вашем сайте - используем google maps
Идея создания карты города на основе яндекс карт, либо google maps в мое голове таилась уже давно, но на реализацию идеи как-всегда не хватало времени
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.