Здравствуйте, уважаемые пользователи LPgenerator!
Сегодня мы научимся создавать всплывающее окно с текстом “Политики конфиденциальности” (или с любым другим текстом) на ваших целевых страницах. Порядок действий опишем очень подробно, поэтому вы можете не беспокоиться, что у вас “не получится”. :)
Итак, что нужно сделать для создания pop-up окна с текстом:
1. С помощью инструмента “Текст” создаем текстовый блок, вставив в него текст политики конфиденциальности (или какую-то другую текстовую информацию), и редактируем его (задаем шрифт, цвет, заголовок и т. д.):
Внимание! Если вы копируете форматированный текст (например, из документа MS Word или со своего сайта), то обязательно снимайте форматирование, вставляя его через стандартную программу “Блокнот” или через инструмент “Только текст” в текстовом редакторе!
2. С помощью инструмента “Кнопка” создаем кнопку и настраиваем ее внешний вид:
Ссылку в кнопке указывать не обязательно, ее можно заменить любым символом, например, “#”!
3. Сохраняем изменения:
4. Копируем код ниже и вставляем его через инструмент “Скрипты”, задав положение
Внутри тега <HEAD>:
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script src="//media.lpgenerator.ru/uploads/images/jquery.tools.min.js"></script> <script>jq_181 = jQuery.noConflict(true);</script>
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 текстового блока:
и вставляем его в добавленный код (заменяем #block-new2):
7. Таким же образом узнаем ID кнопки и вставляем его в добавленный код (заменяем #block-new3):
8. Сохраняем изменения.
Вот и все! Всплывающее окно с текстом готово.
Протестировать pop-up окно, созданное вышеописанным способом, вы можете на макетах лендингов в магазине целевых страниц.
С уважением,
служба технической поддержки LPgenerator
Скажите пожалуйста, я вот решила этот скрипт применить к кнопке "подробнее" (о товаре), но таких кнопок у меня куча и у каждой свое окно со своей информацией, можно ли как то поменять код для такого случая, чтобы не делать 150 одинаковых скриптов. Или быть может для этого используется свой вариант, которого я к сожалению не знаю. Очень жду вашей помощи.
Полина
У меня не получается это сделать. Можно получить более подробную информацию?
Я создаю текстовый блок, создаю кнопку, прописываю скрипты. А куда девать текстовый блок? - он просто появляется на странице и все, кнопка не работает.
Кнопка не срабатывает, текст тоже не знаю куда девать. Что-то в этом описании не так!
Согласна с Полиной. Чтобы не делать отдельные страницы с описанием товара (при переходе на которые клиент будет считаться уникальным на каждой такой странице, т.к. это отдельный лендинг пейдж), можно ли сделать всплывающие окна с описанием, картинкой и формой (имя, телефон, кнопка "Заказать")? Вот как здесь: http://dev.landingpage.bz/zil/ (http://dev.landingpage.bz/zil/) Ведь как-то же это внедрили! Жду ответ.
С уважением, Алена Гунгер.
Все норм работает. Спасибо за науку!
Для тех у кого не получается: если браузер гугловский у вас, то он может переводить вставляемый код на русский язык (вообщем на ваш родной язык переводит). Я с первого раза тож не понял, что за фигня... Так, что вставляйте первозданный код, не переводите страницу... как то так...
еще раз спасибо за науку))
Алексей.
где служба поддержки? почему не отписывает? много лудей в ступоре. не получается сделать всплывающие окно. Гугл не причем.
Вообщем Разобрался! Работает. Не забываем названия Скриптов указывать, Текст можно спрятать за фоном или рисунком.. другого варианта не нашел...
Скажите, а можно таким же образом вызывать всплывающую картинку??
Также хотел бы увидеть ответы на комментарий 1 и 4
Спасибо за сервис! Все работает! P.S. В качестве кнопки вызова всплывающего окна можно использовать текст (например, "Политика конфиденциальности"), можно в текстовом редакторе добавить ему формат ссылки, но работает и так - главное вставить в скрипт его ID. Чтобы спрятать текст за фоном (при отображении страницы его видно не будет, просто чтобы не мешал редактированию сайта), в расширенных настройках текстового блока, параметру Z-index нужно задать значение "0". Всем удачи!
Сделал всё по инструкции. Кнопка не работает, текст виден.
Обратитесь с заявкой в техническую поддержку компании, для этого напишите письмо по адресу support@lpgenerator.ru.
Также укажите адрес страницы.
О почему только одно окно так можно сделать?
И да, в 4 комментарии очень хорошо вас спросили, почему тишина?
Как сделать так как просят в 4 комментарии?
добрый вечер)) Я правильно понял что с этим кодом можно сделать только одно всплывающее окно?
Здравствуйте, Сергей!
Представленный код предназначен для создания одного всплывающего окна. Если вам необходимо использовать больше окон с текстом, следует заменить в скрипте, который копируется на шаге 4 все упоминания overlay1 на overlay2 для второго всплывающего окна, на overlay3 - для третьего и так далее.
На скриншоте отмечены все четыре упоминания этого параметра, которые следует заменить: http://prntscr.com/3ccsap
Обратите внимание, что каждое окно создаётся новым скриптом.
При этом код противоконфликтного модуля добавляется только один раз.(шаг 8)
Если у вас возникнут сложности при реализации - пишите на наш ящик службы технической поддержки: support@lpgenerator.ru
Сделала все как в инструкции, толку нет! Текст отдельно, кнопка отдельно! Столько времени зря потратила!
Здравствуйте, Маргарет!
Скрипт политики конфиденциальности опробован и реализован многократно, наиболее вероятно, что в ваших действиях есть некая неточность.
Укажите, на какой странице вы настраиваете всплывающее окно с текстом, а ещё лучше - свяжитесь с службой поддержки любым удобным вам способом, например, по почте support@lpgenerator.ru, или через Skype - ник LPgenerator - мы обязательно определим причину проблемы и найдём решение.
Все работает! Спасибо! Получилось не с первой попытки - при редактировании кода (копипасте ID якоря) образовался лишний символ #. Новички, аккуратнее с этим!
Как к всплывающему окну добавить крестик в верхний правый угол?
Здравствуйте, Юлия!
Замените в скрипте "Политика конфиденциальности", который используется на вашей странице строчку:
background-image:url(http://jquerytools.org/media/img/overlay/close.png);
на ту, что указана в инструкции:
background-image:url(http://lpgenerator.ru/media/css/upgrade/widget/popup/close.png);
В результате у политики конфиденциальности появится крестик для закрытия.
Великолепно! Спасибо, Максим!
все работает отлично. спасибо
Можно ли добавить картинку в всплывающее окно? Если нет то как можно реализовать это? Мне нужно чтобы по клику на кнопку "подробнее" всплывало окно с описанием и небольшой картинкой.
Здравствуйте, Алексей.
Скрипт "Политика конфиденциальности" предназначен для вывода именно текста, и не подходит для всплывающего окна с картинкой.
В целом реализовать вывод окна с изображением и текстом - можно. Для этого понадобится некоторый опыт работы со скриптами на JavaScript.
Также вы можете обратиться к нашим специалистам отдела вёрстки за реализацией такого скрипта. Пишите на адрес support@lpgenerator.ru - что-нибудь придумаем!
Всё отлично работает, только можно ли как-то в самом редакторе текст скрыть?
А то на сайте получается, что текст не виден, а в редакторе он пол страницы загораживает.
Здравствуйте, Игорь! Вы можете передвинуть текст за пределы рабочей области редактора, например, вправо. Обратите внимание, не переносите текст вниз страницы, так как это увеличит ее длину и может получиться пустое пространство внизу страницы.
Лина, спасибо за совет =) всё гениальное оказалось просто =)