База знаний
по возможностям платформы

Как сделать всплывающее окно с текстом “Политика конфиденциальности”

pop-up с текстом

Здравствуйте, уважаемые пользователи LPgenerator!

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

Итак, что нужно сделать для создания pop-up окна с текстом:

1. С помощью инструмента “Текст” создаем текстовый блок, вставив в него текст политики конфиденциальности (или какую-то другую текстовую информацию), и редактируем его (задаем шрифт, цвет, заголовок и т. д.):

текст

Внимание! Если вы копируете форматированный текст (например, из документа MS Word или со своего сайта), то обязательно снимайте форматирование, вставляя его через стандартную программу “Блокнот” или через инструмент “Только текст” в текстовом редакторе!

2. С помощью инструмента “Кнопка” создаем кнопку и настраиваем ее внешний вид:

кнопка

Ссылку в кнопке указывать не обязательно, ее можно заменить любым символом, например, “#”!

3. Сохраняем изменения:

сохранение

4. Копируем код ниже и вставляем его через инструмент “Скрипты”, задав положение
Перед тегом </BODY>:

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script>jq_181 = jQuery.noConflict(true);</script>

pop-up с текстом

4. Сохраняем изменения:

5. Копируем код ниже и вставляем его через инструмент “Скрипты”, задав положение
Перед тегом </BODY>:

<style>
.simple_overlay_p { display:none; z-index:10000; position:absolute; background-color:#fff; width:980px; min-height:200px; max-height:400px; border:1px solid #666; padding:10px; -moz-box-shadow:0 0 90px 5px #000; -webkit-box-shadow: 0 0 90px #000; } .overlay_block{overflow:auto; } .simple_overlay_p .close { background-image:url(http://jquerytools.org/media/img/overlay/close.png); position:absolute; z-index:10001; right:-15px; top:-15px; cursor:pointer; height:35px; width:35px; }
</style>

<script>
jq_181(function($){
    var text_block = '#block-new134'; /* Блок с текстом */
    var button = '#block-new135 a'; /* кнопка вызова */

    $('body').append('<div class="simple_overlay_p" id="overlay1"></div>');
    $('#overlay1').html('<div class="overlay_block"><a class="close" style="width:30px; height:30px; top: -15px; right: -15px; background: transparent url(http://lpgenerator.ru/media/fancybox/fancybox.png) -40px 0px;"></a>' + $(text_block).html() + '</div>');
    $(text_block).hide();

    $('#overlay1').overlay({ top: '10%', mask: { color:'#000', opacity:.6 } });
    $('.overlay_block, .simple_overlay_p').css({ 'max-height': $(window).height() * 0.7 + 'px'});
    
    $(button).click(function(e){
            e.preventDefault();
            $('#overlay1').overlay().load();

    });
});
</script>

скрипты

6. Через “Расширенные свойства” узнаем ID текстового блока:

ID

и вставляем его в добавленный код (заменяем #block-new2):

pop-up с текстом

7. Таким же образом узнаем ID кнопки и вставляем его в добавленный код (заменяем #block-new3):

pop-up с текстом

8. Сохраняем изменения.

Сохранение

Вот и все! Всплывающее окно с текстом готово.

Протестировать pop-up окно, созданное вышеописанным способом, вы можете на макетах лендингов в магазине целевых страниц.

С уважением,
служба технической поддержки LPgenerator

 

Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 4 из 5
Еще есть вопросы? Отправить запрос

Комментарии

  • Avatar
    Пользователь anilopa2008

    Скажите пожалуйста, я вот решила этот скрипт применить к кнопке "подробнее" (о товаре), но таких кнопок у меня куча и у каждой свое окно со своей информацией, можно ли как то поменять код для такого случая, чтобы не делать 150 одинаковых скриптов. Или быть может для этого используется свой вариант, которого я к сожалению не знаю. Очень жду вашей помощи.

    Полина

  • Avatar
    Татьяна

    У меня не получается это сделать. Можно получить более подробную информацию?

    Я создаю текстовый блок, создаю кнопку, прописываю скрипты. А куда девать текстовый блок? - он просто появляется на странице и все, кнопка не работает. 

  • Avatar
    Пользователь managerizosimov

    Кнопка не срабатывает, текст тоже не знаю куда девать. Что-то в этом описании не так!

  • Avatar
    Алена Гунгер

    Согласна с Полиной. Чтобы не делать отдельные страницы с описанием товара (при переходе на которые клиент будет считаться уникальным на каждой такой странице, т.к. это отдельный лендинг пейдж), можно ли сделать всплывающие окна с описанием, картинкой и формой (имя, телефон, кнопка "Заказать")? Вот как здесь: http://dev.landingpage.bz/zil/ (http://dev.landingpage.bz/zil/)  Ведь как-то же это внедрили! Жду ответ.
    С уважением, Алена Гунгер.

  • Avatar
    Пользователь realiti300

    Все норм работает. Спасибо за науку!

    Для тех у кого не получается: если браузер гугловский у вас, то он может переводить вставляемый код на русский язык (вообщем на ваш родной язык переводит). Я с первого раза тож не понял, что за фигня... Так, что вставляйте первозданный код, не переводите страницу... как то так...

    еще раз спасибо за науку)) 

    Алексей.

  • Avatar
    Пользователь novaya.era.vin

    где служба поддержки? почему не отписывает? много лудей в ступоре. не получается сделать всплывающие окно. Гугл не причем.

  • Avatar
    Пользователь novaya.era.vin

    Вообщем Разобрался! Работает. Не забываем названия Скриптов указывать, Текст можно спрятать за фоном или рисунком.. другого варианта не нашел...

  • Avatar
    Пользователь makintosh120

    Скажите, а можно таким же образом вызывать всплывающую картинку??

    Также хотел бы увидеть ответы на комментарий 1 и 4 

  • Avatar
    Дмитрий Везденев

    Спасибо за сервис! Все работает! P.S. В качестве кнопки вызова всплывающего окна можно использовать текст (например, "Политика конфиденциальности"), можно в текстовом редакторе добавить ему формат ссылки, но работает и так - главное вставить в скрипт его ID. Чтобы спрятать текст за фоном (при отображении страницы его видно не будет, просто чтобы не мешал редактированию сайта), в расширенных настройках текстового блока, параметру Z-index нужно задать значение "0". Всем удачи!

  • Avatar
    Денис

    Сделал всё по инструкции. Кнопка не работает, текст виден.

  • Avatar
    Сергей Гамзин

    Обратитесь с заявкой в техническую поддержку компании, для этого напишите письмо по адресу support@lpgenerator.ru.

    Также укажите адрес страницы.

  • Avatar
    Пользователь nastyalos

    О почему только одно окно так можно сделать?
    И да, в 4 комментарии очень хорошо вас спросили, почему тишина?
    Как сделать так как просят в 4 комментарии?

  • Avatar
    Сергей

    добрый вечер)) Я правильно понял что с этим кодом можно сделать только одно всплывающее окно?

  • Avatar
    Максим Гуйван

    Здравствуйте, Сергей!

    Представленный код предназначен для создания одного всплывающего окна. Если вам необходимо использовать больше окон с текстом, следует заменить в скрипте, который копируется на шаге 4 все упоминания overlay1 на overlay2 для второго всплывающего окна, на overlay3 - для третьего и так далее.

    На скриншоте отмечены все четыре упоминания этого параметра, которые следует заменить: http://prntscr.com/3ccsap

    Обратите внимание, что каждое окно создаётся новым скриптом.

    При этом код противоконфликтного модуля добавляется только один раз.(шаг 8)

    Если у вас возникнут сложности при реализации - пишите на наш ящик службы технической поддержки: support@lpgenerator.ru

  • Avatar
    Маргарет Стивенс

    Сделала все как в инструкции, толку нет! Текст отдельно, кнопка отдельно! Столько времени зря потратила!

  • Avatar
    Максим Гуйван

    Здравствуйте, Маргарет!

    Скрипт политики конфиденциальности опробован и реализован многократно, наиболее вероятно, что в ваших действиях есть некая неточность.

    Укажите, на какой странице вы настраиваете всплывающее окно с текстом, а ещё лучше - свяжитесь с службой поддержки любым удобным вам способом, например, по почте support@lpgenerator.ru, или через Skype - ник LPgenerator - мы обязательно определим причину проблемы и найдём решение.

  • Avatar
    Антон Тюкавин

    Все работает! Спасибо! Получилось не с первой попытки - при редактировании кода (копипасте ID якоря) образовался лишний символ #. Новички, аккуратнее с этим!

  • Avatar
    Юлия

    Как к всплывающему окну добавить крестик в верхний правый угол?

  • Avatar
    Максим Гуйван

    Здравствуйте, Юлия!

    Замените в скрипте "Политика конфиденциальности", который используется на вашей странице строчку:

    background-image:url(http://jquerytools.org/media/img/overlay/close.png);

    на ту, что указана в инструкции:

    background-image:url(http://lpgenerator.ru/media/css/upgrade/widget/popup/close.png);

    В результате у политики конфиденциальности появится крестик для закрытия.

  • Avatar
    Юлия

    Великолепно! Спасибо, Максим!

  • Avatar
    Денис

    все работает отлично. спасибо

  • Avatar
    Алексей

    Можно ли добавить картинку в всплывающее окно? Если нет то как можно реализовать это? Мне нужно чтобы по клику на кнопку "подробнее" всплывало окно с описанием и небольшой картинкой.

  • Avatar
    Максим Гуйван

    Здравствуйте, Алексей.

    Скрипт "Политика конфиденциальности" предназначен для вывода именно текста, и не подходит для всплывающего окна с картинкой.

    В целом реализовать вывод окна с изображением и текстом - можно. Для этого понадобится некоторый опыт работы со скриптами на JavaScript.

    Также вы можете обратиться к нашим специалистам отдела вёрстки за реализацией такого скрипта. Пишите на адрес support@lpgenerator.ru - что-нибудь придумаем!

  • Avatar
    Игорь Тангатаров

    Всё отлично работает, только можно ли как-то в самом редакторе текст скрыть?
    А то на сайте получается, что текст не виден, а в редакторе он пол страницы загораживает.

  • Avatar
    Лина Малькова

    Здравствуйте, Игорь! Вы можете передвинуть текст за пределы рабочей области редактора, например, вправо. Обратите внимание, не переносите текст вниз страницы, так как это увеличит ее длину и может получиться пустое пространство внизу страницы.

  • Avatar
    Игорь Тангатаров

    Лина, спасибо за совет =) всё гениальное оказалось просто =)

  • Avatar
    Александр Неясов
    Изменено: Александр Неясов
На базе технологии Zendesk