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


Как Сделать Всплывающее Окно?


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

#1 Natashka prosto prazdnik

Natashka prosto prazdnik

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

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

Отправлено 31 Январь 2016 - 15:05

Здравствуйте!

Нужно, чтобы при входе покупателя в карточку товара, всплывало окно с нужным текстом. Текст всегда один и тот же. Как сделать?

#2 Юля123

Юля123

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

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

Отправлено 01 Февраль 2016 - 16:02

Просмотр сообщенияNatashka prosto prazdnik (31 Январь 2016 - 15:05) писал:

Здравствуйте!

Нужно, чтобы при входе покупателя в карточку товара, всплывало окно с нужным текстом. Текст всегда один и тот же. Как сделать?

Здравствуйте, в конце 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;
}


далее в самом конце шаблоне Товар, после всего кода, добавьте код:


<div id="parent_popup">
<div id="popup">
<h1>Ваш текст </h1>
<h2>Ваш текст </h2>
<p>&nbsp;</p>
<h3>Ваш текст </h3>
<h3>Ваш текст </h3>
<h3>Ваш текст</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 = 500; /*время задержки примерно полсекунды*/
setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
// ]]></script>


В это коде изменяйте все "Ваш текст" на нужный Вам код (лишнее удалите). Это окно появляется с задержкой в примерно в  полсекунды, если Вы хотите изменить это значение, то в этом коде, в строке:

var delay_popup = 500; /*время задержки примерно  полсекунды*/

меняйте значение 500. Чем оно больше, тем больше задержка.

#3 Natashka prosto prazdnik

Natashka prosto prazdnik

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

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

Отправлено 02 Февраль 2016 - 16:07

Просмотр сообщенияЮля123 (01 Февраль 2016 - 16:02) писал:

Здравствуйте, в конце main.css добавьте код:
...

Спасибо! Работает именно так как нужно!




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

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