1. Мы продолжаем публиковать интересные статьи на тему SocialEngine 4. Одна из статей посвящена правильному выбору сервера для вашей социальной сети, а другая содержит советы по увеличению производительности платформы. Также мы добавили большую статью о пользовательских уровнях. Ознакомиться со статьями вы можете в разделе Вопросы и Ответы SocialEngine 4.
  2. Вам кажется, что ваша версия SocialEngine 4, работает медленно?

    Голосуйте. Пишите свою версию системы, железо на чем работает и количество пользователей. Будем увеличивать производительность :-) Подробнее

  3. В связи с участившимися случаями попыток продажи пользователями форума различных "сборок" коммерческих социальных платформ, обычно основанных на SocialEngine 3, вводится новое правило для форума. Запрещается создание тем или размещение в уже созданных предложений о продаже или размещение ссылок на сайты, где происходит продажа "сборок". Пользователи, которые продолжат свою коммерческую деятельность в данном направлении, будут заблокированы. Подробнее.

Скрипт всплывающего попап окна на jquery (javascript) с блокировкой

Discussion in 'JavaScript' started by dream, Dec 15, 2010.

  1. dream Thread starter User


    Offline
    Message Count:
    144
    Likes Received:
    32
    Я думаю, все со мной согласятся, что всяческие всплывающие окна с, например, порно рекламой - это плохо. Однако, иногда popup-окошко может неплохо пригодиться. Ведь подавляющее большинство интернет-пользователей - это юзеры непродвинутые. И иногда их следует подталкивать к действию, которое мы от них ждем. Допустим, это будет подписка на рассылку.
    --------------------------------------------------------------------------------------------------------------
    В данной заметке я расскажу (и покажу на примере) насколько просто создать всплывающее попап окно с помощью javascript-библиотеки jquery, а так же мы предусмотрим возможность блокировки этого всплывающего окна пользователем. Popup-окошко будет всплывать при посещении страницы сайта, например спустя секунду после ее загрузки. Затем, если посетитель нажмет кнопку закрытия окошка либо выполнит действие, предлагаемое всплыващим окном, попап-окошко заблокируется в cookie браузера и больше этому пользователю показываться не будет. Если он конечно не ушел с сайта сразу при виде всплывающего окна :) И последнее - мы реализуем "разблокировку" нашего всплывающего окна по нажатию определенных кнопок клавиатуры - это будет полезно в первую очередь нам самим при разработке.

    Итак, начнем. Пусть у нас есть форма подписки, которую мы хотим разместить в качестве всплывающего попап окна на нашем сайте. Попапом будет блок (к примеру, #adSite), абсолютно спозиционированный относительно общего контейнера - например body. Для этого нужно:

    указать body css-стиль position:relative;
    указать блоку #adSite css-стиль position:absolute;left:100px;top:100px;display:none; - это начальные установки, они потом поменяются скриптом;
    разместить форму подписки в блок #adSite;
    подключить на сайте jquery;
    написать наш скрипт, который будет управлять всплывающим окном, и вставить его туда же в блок #adSite.

    Сразу покажу, что у нас получится в конце - пример страницы со всплывающим окном. Вы можете открыть исходный код, чтобы посмотреть как все устроено.

    Как это работает: после загрузки страницы плюс 1 секунду запускается функция показа всплывающего окна. Она проверяет наличие в cookie пометки о блокировке всплывающего окна, и если ее нет - показывает попап-окно. Окошко показывается с помощью метода slideDown - то есть как бы выезжает вниз. Затем если пользователь заполнил форму подписки и нажал "Подписаться", то окошко скрывается и в cookie помечается как заблокированное. При последующих перемещениях по сайту или перезагрузке страницы оно показываться не будет. То же самое происходит если посетитель нажал на крестик.

    Показать заблокированное всплывающее окно и отменить блокировку - то бишь стереть пометку в cookie - можно, нажав сочетание клавиш ctrl+enter.

    Вобщем все вроде просто и разобраться в скрипте нашего всплывающего окна надеюсь вы сможете без труда. С минимальными познаниями в jQuery и javascript.
    --------------------------------------------------------------------------
    mr.dream :cool:
  2. sewgen User


    Offline
    Message Count:
    259
    Likes Received:
    40
    My version of SE:
    3.20
    Простая задачка: как поменять серые ютьюбовские скролл-бар и нижнюю панель видеоокна в стандартном плагине Видео к SE 3.20?
    И шоп: кроссбраузерно получалось.

    Исходники есть. Как привинтить никуя не соображу.
  3. dream Thread starter User


    Offline
    Message Count:
    144
    Likes Received:
    32
    емм...точно незнаю но разве же плеер не ёутооб"овский...и там разве можно так сделать? ТУПИК ;)
  4. sewgen User


    Offline
    Message Count:
    259
    Likes Received:
    40
    My version of SE:
    3.20
  5. lem1x Active member


    Offline
    Message Count:
    166
    Likes Received:
    68
    Я может и слепой, но пример я так и не увидел...
    А весчь очень полезная.Можно много куда прикрутить!
  6. Gooos абырвалГ


    Offline
    • Admin
    Message Count:
    2,435
    Likes Received:
    645
    My version of SE:
    3.20
    Инструкция вроде тут написана: http://jscrollpane.kelvinluck.com/

Share This Page

All rights reserved SocEngine.ru ©