Перейти к содержимому


Сделал Всплывающее Окно - Делюсь С Вами


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 142

#1 Братишка

Братишка

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 66 сообщений

Отправлено 15 Декабрь 2012 - 14:44

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

/*Всплывающее окно*/
#parent_popup {
background-color: rgba(0, 0, 0, 0.8);
display: none;
position: fixed;
z-index: 99999;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#popup {
background: #fff;
width: 500px; /*Ширина окна*/
margin: 10% auto;
padding: 5px 20px 13px 20px;
border: 10px solid #ddd;
position: relative;
/*--CSS3 CSS3 Тени для Блока--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Закругленные углы--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#popup h1{
font:28px Monotype Corsiva, Arial;
font-weight: bold;
text-align: center;
color: red;
text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
#popup h2{
font:24px Monotype Corsiva, Arial;
color: #1985b4;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
#popup h3{
font:18px Monotype Corsiva, Arial;
color: #1985b4;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
/* кнопка закрытия */
.close {
background-color: rgba(0, 0, 0, 0.8) !important;
border: 2px solid #ccc;
height: 24px;
line-height: 24px !important;
position: absolute !important;
right: -24px;
cursor: pointer !important;
font-family: Times !important;
font-weight: bold !important;
text-align: center !important;
text-decoration: none !important;
color: rgba(255, 255, 255, 0.9) !important;
font-size: 14px !important;
text-shadow: 0 -1px rgba(0, 0, 0, 0.9) !important;
top: -24px;
width: 24px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background-color: rgba(0, 122, 200, 0.8) !important;
}
Потом в разделе редактирования главной страницы Сайт->Главная страница нажал в редакторе кнопку HTML
1.jpg
и в конец кода вставил всю внутренность моего окна с соответствующими стилями плюс скрипт:
2.jpg

<div id="parent_popup">
<div id="popup">
<h1>Внимание, Братишки!</h1>
<h2>В среду 19 декабря в 16:00</h2>
<p>&nbsp;</p>
<h3>В рамках клуба коллекционеров-фалеристов</h3>
<h3>В ДК "Нагорный"</h3>
<h3>по адресу г.Москва м. Нагорная ул. Электролитный проезд дом 3</h3>
<h3>состоится</h3>
<p>&nbsp;</p>
<h2>Презентация-продажа атрибутики ВДВ и Спецназа интернет-магазина "Братишка"</h2>
<a class="close" title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';">X</a></div>
</div>
<script type="text/javascript">// <![CDATA[
var delay_popup = 3000; /*время задержки примерно 3 секунды*/
setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
// ]]></script>
Что написано русским, заменяете на любой ваш текст.
Вот и всё ;) Дерзайте, штука полезная, многим пригодится.

#2 ogonek7777

ogonek7777

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 07 Февраль 2013 - 22:03

Вы супер! Ставлю в общую темку решений)))

#3 ogonek7777

ogonek7777

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 10 Февраль 2013 - 20:00

У меня получилось по-другому. Открываю HTML и внузу, но выше фразы  <!-- Скрипты которые не нужно менять, грузятся из папки общих файлов --> вставляем.
<link rel="stylesheet" href="css/styles.css" type="text/css" />
<style>
/* Всплывающее окно */ 
#parent_popup {
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
#popup {
  background: #fff;
	width: 520px;
	margin: 10% auto;
padding: 5px 20px 13px 20px;
border: 10px solid #ddd;
position: relative;
/*--CSS3 CSS3 Тени для Блока--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Закругленные углы--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#popup h1{
	font:28px Monotype Corsiva, Arial;
	font-weight: bold;
text-align: center;
color: #008000;
text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
#popup h2{
	font:24px Monotype Corsiva, Arial;	 
color: #008000;
text-align: left;
text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
/* кнопка закрытия */
.close {
	background-color: rgba(0, 0, 0, 0.8);
border: 2px solid #ccc;
	height: 24px;
	line-height: 24px;
	position: absolute;
	right: -24px;
cursor: pointer;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
color: rgba(255, 255, 255, 0.9);
	font-size: 14px;
	text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
	top: -24px;
	width: 24px;
-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;
	border-radius: 15px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
	background-color: rgba(0, 122, 200, 0.8);
}
</style>
</head>
<body>
<p style="text-align: center;">
<a href="http://dbmast.ru"><img src="http://dbmast.ru/wp-content/themes/Fashion/images/logo.png" alt="Контакты" /></a></p>
<h2>Всплывающее модальное окно при загрузке сайта на CSS</h2>
<p style="text-align: center;">
<h3>Модальное окно откроется после полной загрузки страницы по истечении 5 секунд.</h3></p>
<div id="parent_popup">
  <div id="popup">
<h1>«Практика резиновой верстки сайта»</h1>
<a href="http://webformyself.com/aff/dobrovoi/practicerubber"><img src="http://dbmast.ru/wp-content/uploads/2012/11/DVD009.jpg" width="190" height="252" alt="Практический курс резиновой верстки" style="float:left;margin:5px 10px 5px 0; border:0; " /></a>
<h2>Уважаемые друзья!</h2>
Обращаю Ваше внимание, что <strong>27</strong> ноября, мои коллеги из команды <strong>WebForMySelf</strong> запустили абсолютно новый обучающий курс:<p> <a href="http://webformyself.com/aff/dobrovoi/practicerubber">«Практика резиновой верстки сайта»</a></p>
<p>Хотите, чтобы ваш сайт отображался красиво и элегантно в широкоформатных мониторах и также красиво, и аккуратно ужимался в узких?</p>
<p><h2> Тогда не тяните резину !</h2></p>
Видеокурс "Практика резиновой верстки сайта" - это <strong>37</strong> качественных уроков, более <strong>19</strong> часов видео с подробными инструкциями.
<p>Без воды. Лишней теории. Убитого времени. Просто взять и сделать!<p>
<p style="text-align: center;"><strong><a class="button" href="http://webformyself.com/aff/dobrovoi/practicerubber">Получить »</a></strong></p>  
<a class="close" title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';">X</a>
  </div>
</div>
<script type="text/javascript">
var delay_popup = 5000;
setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
</script>
Далее меняем тексты, корректируем оформление.

#4 ogonek7777

ogonek7777

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 21 Февраль 2013 - 21:42

Подскажите, Вы не обратили внимание: не увеличивается ли число отказов при внедрении данного окна? Окно уже убрано и можно сравнить данные, например, по статистике Яндекс.Метрики.

#5 nozzLess

nozzLess

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 53 сообщений

Отправлено 10 Март 2013 - 14:32

Все это хорошо, но хотелось бы, чтобы окно не появлялось постоянно) Надо чтобы оно появлялось только при первом заходе на сайт, а не каждый раз. Такое возможно? (знаю что возможно, админы, не ленитесь)))

#6 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 11 Март 2013 - 08:19

 nozzLess (10 Март 2013 - 14:32) писал:

Все это хорошо, но хотелось бы, чтобы окно не появлялось постоянно) Надо чтобы оно появлялось только при первом заходе на сайт, а не каждый раз. Такое возможно? (знаю что возможно, админы, не ленитесь)))

Чтобы окно всплывало только один раз нужно в js добавить такой код:
<script language="javascript">
<!--
if (document.cookie.indexOf('_visited=1') == -1) {
/*код с всплывающим окном*/
document.cookie = '_visited=1; path=/';
}
//-->
</script>


#7 ORNYSE

ORNYSE

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 75 сообщений
  • ГородВладивосток

Отправлено 20 Март 2013 - 12:21

А как мне вставить это окно в определенную стараницу с товаром?

#8 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 20 Март 2013 - 13:51

 ORNYSE (20 Март 2013 - 12:21) писал:

А как мне вставить это окно в определенную стараницу с товаром?
Вы можете вставить в описании товара. Через редактор html

#9 ORNYSE

ORNYSE

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 75 сообщений
  • ГородВладивосток

Отправлено 20 Март 2013 - 14:07

Что конкретно вставить не понимаю. Вставляю все коды в страницу получается на странице с товаром набор символов от кода

 miyako (20 Март 2013 - 13:51) писал:

Вы можете вставить в описании товара. Через редактор html


#10 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 20 Март 2013 - 14:29

 ORNYSE (20 Март 2013 - 14:07) писал:

Что конкретно вставить не понимаю. Вставляю все коды в страницу получается на странице с товаром набор символов от кода

В файл main.css нужно вставить код:
/*Всплывающее окно*/
#parent_popup {
background-color: rgba(0, 0, 0, 0.8);
display: none;
position: fixed;
z-index: 99999;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#popup {
background: #fff;
width: 500px; /*Ширина окна*/
margin: 10% auto;
padding: 5px 20px 13px 20px;
border: 10px solid #ddd;
position: relative;
/*--CSS3 CSS3 Тени для Блока--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Закругленные углы--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#popup h1{
font:28px Monotype Corsiva, Arial;
font-weight: bold;
text-align: center;
color: red;
text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
#popup h2{
font:24px Monotype Corsiva, Arial;
color: #1985b4;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
#popup h3{
font:18px Monotype Corsiva, Arial;
color: #1985b4;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
/* кнопка закрытия */
.close {
background-color: rgba(0, 0, 0, 0.8) !important;
border: 2px solid #ccc;
height: 24px;
line-height: 24px !important;
position: absolute !important;
right: -24px;
cursor: pointer !important;
font-family: Times !important;
font-weight: bold !important;
text-align: center !important;
text-decoration: none !important;
color: rgba(255, 255, 255, 0.9) !important;
font-size: 14px !important;
text-shadow: 0 -1px rgba(0, 0, 0, 0.9) !important;
top: -24px;
width: 24px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background-color: rgba(0, 122, 200, 0.8) !important;
}

В страницу через редактор html кода вставьте код:
<div id="parent_popup">
<div id="popup">
<h1>Внимание, Братишки!</h1>
<h2>В среду 19 декабря в 16:00</h2>
<p>&nbsp;</p>
<h3>В рамках клуба коллекционеров-фалеристов</h3>
<h3>В ДК "Нагорный"</h3>
<h3>по адресу г.Москва м. Нагорная ул. Электролитный проезд дом 3</h3>
<h3>состоится</h3>
<p>&nbsp;</p>
<h2>Презентация-продажа атрибутики ВДВ и Спецназа интернет-магазина "Братишка"</h2>
<a class="close" title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';">X</a></div>
</div>
<script type="text/javascript">// <![CDATA[
var delay_popup = 3000; /*время задержки примерно 3 секунды*/
setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
// ]]></script>
Полная инструкция здесь - http://forum.storela...ами/#entry35322

#11 ORNYSE

ORNYSE

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 75 сообщений
  • ГородВладивосток

Отправлено 20 Март 2013 - 14:43

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

#12 support 2.0

support 2.0

    Активный участник

  • Модераторы
  • 4 950 сообщений

Отправлено 20 Март 2013 - 17:23

 ORNYSE (20 Март 2013 - 14:43) писал:

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


Попробуйте изменить
<script type="text/javascript">// <![CDATA[
var delay_popup = 3000; /*время задержки примерно 3 секунды*/
setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
// ]]></script>

на
<script type="text/javascript">
var delay_popup = 3000;
setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
</script>


#13 REDMAID

REDMAID

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 152 сообщений

Отправлено 05 Апрель 2013 - 15:02

а как сделать чтоб данное окно всплывало только при щелчке на определенную ссылку?

#14 Koderhan

Koderhan

    Активный участник

  • Модератоpы
  • 6 227 сообщений

Отправлено 05 Апрель 2013 - 15:52

 REDMAID (05 Апрель 2013 - 15:02) писал:

а как сделать чтоб данное окно всплывало только при щелчке на определенную ссылку?
Можно сделать все как описано тут.
http://forum.storela...ами/#entry53339
А затем заменить код:
<script type="text/javascript">// <![CDATA[
var delay_popup = 3000; /*время задержки примерно 3 секунды*/
setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
// ]]></script>
На такой:
<script type="text/javascript">// <![CDATA[
$("#c1").click(function(){
$('#parent_popup').style.display='block'", delay_popup);
});
// ]]></script>
Теперь на любую страницу можно добавить Код кнопки при нажатие на которую произойдет открытие окошка.
<a href="#" id="c1">кнопка</a>


#15 rodynat

rodynat

    Пользователь

  • Пользователи
  • PipPip
  • 40 сообщений

Отправлено 26 Апрель 2013 - 11:26

 Koderhan (05 Апрель 2013 - 15:52) писал:

Можно сделать все как описано тут.
http://forum.storela...ами/#entry53339
А затем заменить код:
<script type="text/javascript">// <![CDATA[
var delay_popup = 3000; /*время задержки примерно 3 секунды*/
setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
// ]]></script>
На такой:
<script type="text/javascript">// <![CDATA[
$("#c1").click(function(){
$('#parent_popup').style.display='block'", delay_popup);
});
// ]]></script>
Теперь на любую страницу можно добавить Код кнопки при нажатие на которую произойдет открытие окошка.
<a href="#" id="c1">кнопка</a>

 Koderhan (05 Апрель 2013 - 15:52) писал:

Можно сделать все как описано тут.
http://forum.storela...ами/#entry53339
А затем заменить код:
<script type="text/javascript">// <![CDATA[
var delay_popup = 3000; /*время задержки примерно 3 секунды*/
setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
// ]]></script>
На такой:
<script type="text/javascript">// <![CDATA[
$("#c1").click(function(){
$('#parent_popup').style.display='block'", delay_popup);
});
// ]]></script>
Теперь на любую страницу можно добавить Код кнопки при нажатие на которую произойдет открытие окошка.
<a href="#" id="c1">кнопка</a>

Добрый день! Помогите пожалуйста разобраться с окном. Хочу такое окно как здесь, все скачала и сделала согласно этой инструкции инструкция.png инструкция.png и инструкция1.png

Но почему-то нету этого окна, только белый экран при наведении курсора на верхнюю панель. В чем моя ошибка, что нужно исправить, пожалуйста помогите!!! Вот код HTML где делала изменения
Скрытый текст

Адрес моего сайта http://style3.ru  Помогите пожалуйста!!!!!

#16 support 2.0

support 2.0

    Активный участник

  • Модераторы
  • 4 950 сообщений

Отправлено 26 Апрель 2013 - 16:46

 rodynat (26 Апрель 2013 - 11:26) писал:

Добрый день! Помогите пожалуйста разобраться с окном. Хочу такое окно как здесь, все скачала и сделала согласно этой инструкции инструкция.png инструкция.png и инструкция1.png

Но почему-то нету этого окна, только белый экран при наведении курсора на верхнюю панель. В чем моя ошибка, что нужно исправить, пожалуйста помогите!!! Вот код HTML где делала изменения

Адрес моего сайта http://style3.ru  Помогите пожалуйста!!!!!

Первое что я заметила, у Вас идет подключение файла http://ibusiness.jus.../helper2.js.php. А у нас не доступно добавление php файлов и php-скриптов. Поэтому обрабатываться они не будут. Думаю, Вам придется отказаться от данного всплывающего окна. У нас на форуме есть реализация подобных окон. Скажите что Вам нужно в этом окне?

#17 rodynat

rodynat

    Пользователь

  • Пользователи
  • PipPip
  • 40 сообщений

Отправлено 26 Апрель 2013 - 20:29

Добрый вечер! В этой теме мне ответили, что добавят этот сервис в исключения. Меня интересует сервис рассылки. Неужели нельзя подключить современный сервис с подпиской? Smartresponder  у Вас не работает?

Мне важно использовать сервис Justclick

#18 Сake

Сake

    Активный участник

  • Модератоpы
  • 5 979 сообщений

Отправлено 27 Апрель 2013 - 01:56

Не понятен ваш вопрос. Данные сервисы сторонние, и изначальной интеграции с данными сервисами в системе к сожалению нет.

#19 rodynat

rodynat

    Пользователь

  • Пользователи
  • PipPip
  • 40 сообщений

Отправлено 27 Апрель 2013 - 07:32

 Сake (27 Апрель 2013 - 01:56) писал:

Не понятен ваш вопрос. Данные сервисы сторонние, и изначальной интеграции с данными сервисами в системе к сожалению нет.

Т.е то, что Вы ответили в предыдущей теме, можно не ждать.Правильно?

#20 rodynat

rodynat

    Пользователь

  • Пользователи
  • PipPip
  • 40 сообщений

Отправлено 27 Апрель 2013 - 23:47

Решила эту проблему! Просто удалила строки с подключением файла http://ibusiness.jus.../helper2.js.php это в форме подписки, т.е. убрала ее. Оставила одну кнопку "Получить" с ссылкой на страницу подписки, которая у меня уже есть. Вопрос только один, почему если добавлять страницу с подпиской через файл все работает, а если добавлять как новую страницу, то не пропускает?




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных