Здравствуйте!
Нужно, чтобы при входе покупателя в карточку товара, всплывало окно с нужным текстом. Текст всегда один и тот же. Как сделать?
2
Как Сделать Всплывающее Окно?
Автор Natashka prosto prazdnik, 31 янв. 2016 15:05
Сообщений в теме: 2
#1
Отправлено 31 Январь 2016 - 15:05
#2
Отправлено 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> </p> <h3>Ваш текст </h3> <h3>Ваш текст </h3> <h3>Ваш текст</h3> <h3>Ваш текст</h3> <p> </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. Чем оно больше, тем больше задержка.
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных