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


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

Автор TVS163, 31 марта 2015 22:35

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

#1 TVS163

TVS163

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

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

Отправлено 31 Март 2015 - 22:35

Здравствуйте. Неплохо было бы сделать всплывающее окно с картинкой более высокого разрешения когда наводишь на картинку в тексте главной страницы. Это возможно?

Прикрепленные изображения

  • Безымянный.jpg

#2 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 04 Апрель 2015 - 06:01

Инструкция по реализации подобного обсуждалась в следующей теме:
http://forum.storela..._20#entry193559

Только вам необходимо вставлять подобный код в само описание страницы через источник

#3 TVS163

TVS163

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

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

Отправлено 04 Апрель 2015 - 13:29

Просмотр сообщенияVaccina (04 Апрель 2015 - 06:01) писал:

Инструкция по реализации подобного обсуждалась в следующей теме:
http://forum.storela..._20#entry193559

Только вам необходимо вставлять подобный код в само описание страницы через источник

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

#4 TVS163

TVS163

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

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

Отправлено 04 Апрель 2015 - 15:56

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

[qoute]

Просмотр сообщенияTVS163 (04 Апрель 2015 - 13:29) писал:

<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>

<div id="parent_popup">
  <div id="popup">
<img src=http://st.storeland.net/6/1597/682/TELEFONISTA.jpg width="220" height="220" style="float:left;margin:5px 10px 5px 0; border:0; " </a ></a>
<h2>Уважаемый посетитель!</h2>
Вы находитесь на нашем сайте впервые. Дабы упростить поиск товара и устранить все сомнения предлагаем свою помощь. В случае необоходимости вы можете воспользоваться формой обратной связи или позвонить по телефону <strong>8-848-220-81-51</strong>
<p><h2>Легкого поиска и приятных покупок!</h2></p>


<a class="close" title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';">X</a>
  </div>
</div>


#5 Ирина345

Ирина345

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

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

Отправлено 04 Апрель 2015 - 17:18

Просмотр сообщенияTVS163 (04 Апрель 2015 - 15:56) писал:

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


Здравствуйте найдите в описание главной странице, при помощи кнопки "Источник", на панели инструментов, откройте код,
<a href="http://st.storeland.net/6/1606/783/2.jpg" onclick="window.open(this.href, '', 'resizable=yes,status=no,location=no,toolbar=no,menubar=no,fullscreen=no,scrollbars=no,dependent=no'); return false;"><img alt="" src="http://st.storeland.net/6/1597/620/.jpg" style="width: 606px; height: 252px;" /></a><br />
замените на
<a href="#" id="size-page"><img alt="" src="http://st.storeland.net/6/1597/620/.jpg" style="width: 606px; height: 252px;" /></a><br />

<script>
$(document).ready(function() {
$("a#size-page").click(function(){
$.fancybox({
maxWidth : 300,
maxHeight : 330,
fitToView : false,
width : '70%',
height : '70%',
content: '<img src="http://st.storeland.net/6/1597/620/.jpg" alt="" />',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
});
</script>

#6 TVS163

TVS163

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

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

Отправлено 05 Апрель 2015 - 10:59

Просмотр сообщенияИрина345 (04 Апрель 2015 - 17:18) писал:

Здравствуйте найдите в описание главной странице, при помощи кнопки "Источник", на панели инструментов, откройте код,
<a href="http://st.storeland.net/6/1606/783/2.jpg" onclick="window.open(this.href, '', 'resizable=yes,status=no,location=no,toolbar=no,menubar=no,fullscreen=no,scrollbars=no,dependent=no'); return false;"><img alt="" src="http://st.storeland.net/6/1597/620/.jpg" style="width: 606px; height: 252px;" /></a><br />
замените на
<a href="#" id="size-page"><img alt="" src="http://st.storeland.net/6/1597/620/.jpg" style="width: 606px; height: 252px;" /></a><br />

<script>
$(document).ready(function() {
$("a#size-page").click(function(){
$.fancybox({
maxWidth : 300,
maxHeight : 330,
fitToView : false,
width : '70%',
height : '70%',
content: '<img src="http://st.storeland.net/6/1597/620/.jpg" alt="" />',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
});
</script>

Сделал, как вы сказали, но изменений не произошло и появилась js-ошибка. Может что то я не туда воткнул?
Алгоритм как я делал:
1)Зашел в меню "страницы"
2) открыл главную страницу "магазин SEATEX"
3) в описании нажал "источник"
4) заменил код по вашей инструкции

#7 Cupuyc

Cupuyc

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

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

Отправлено 05 Апрель 2015 - 11:21

Просмотр сообщенияTVS163 (05 Апрель 2015 - 10:59) писал:

Сделал, как вы сказали, но изменений не произошло и появилась js-ошибка. Может что то я не туда воткнул?
Алгоритм как я делал:
1)Зашел в меню "страницы"
2) открыл главную страницу "магазин SEATEX"
3) в описании нажал "источник"
4) заменил код по вашей инструкции

Здравствуйте, на данный момент у вас работает всплывающее окно с увеличенной фотографией, ошибка возникает в виджете "поделится" и связанна кнопкой "Одноклассники"

#8 TVS163

TVS163

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

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

Отправлено 05 Апрель 2015 - 12:14

Просмотр сообщенияCupuyc (05 Апрель 2015 - 11:21) писал:

Здравствуйте, на данный момент у вас работает всплывающее окно с увеличенной фотографией, ошибка возникает в виджете "поделится" и связанна кнопкой "Одноклассники"

Это работает стандартный вариант всплывающего окна. А мне бы хотелось что бы оно было несколько красивей. Пример кода всплывающего окна написал в сообщениях выше, только не знаю как его вставить чтобы работало нормально.
Заодно, помогите, пожалуйста, исправить js ошибку в коде, которая есть.

#9 Ирина345

Ирина345

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

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

Отправлено 06 Апрель 2015 - 14:43

Просмотр сообщенияTVS163 (05 Апрель 2015 - 12:14) писал:

Это работает стандартный вариант всплывающего окна. А мне бы хотелось что бы оно было несколько красивей. Пример кода всплывающего окна написал в сообщениях выше, только не знаю как его вставить чтобы работало нормально.
Заодно, помогите, пожалуйста, исправить js ошибку в коде, которая есть.
Здравствуйте, найдите в описание главной странице код
<a href="http://st.storeland.net/6/1606/783/2.jpg" onclick="window.open(this.href, '', 'resizable=yes,status=no,location=no,toolbar=no,menubar=no,fullscreen=no,scrollbars=no,dependent=no'); return false;"><img alt="" src="http://st.storeland.net/6/1597/620/.jpg" style="width: 606px; height: 252px;" /></a><br />
<br />
замените на
<a class="wqe" href="#"><img alt="" src="http://st.storeland.net/6/1597/620/.jpg" style="width: 606px; height: 252px;" /></a><br />
далее в шаблоне HTML

переде кодом
</head>
вставьте
  <script>
$(document).ready(function() {
$(".wqe").fancybox({
maxWidth : 10000,
maxHeight : 500,
fitToView : false,
width : '100%',
height : '100%',
content: '<img src="http://st.storeland.net/6/1606/783/2.jpg" alt="" style="width: 100%;" />',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>

#10 TVS163

TVS163

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

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

Отправлено 06 Апрель 2015 - 17:53

Просмотр сообщенияИрина345 (06 Апрель 2015 - 14:43) писал:

Здравствуйте, найдите в описание главной странице код
<a href="http://st.storeland.net/6/1606/783/2.jpg" onclick="window.open(this.href, '', 'resizable=yes,status=no,location=no,toolbar=no,menubar=no,fullscreen=no,scrollbars=no,dependent=no'); return false;"><img alt="" src="http://st.storeland.net/6/1597/620/.jpg" style="width: 606px; height: 252px;" /></a><br />
<br />
замените на
<a class="wqe" href="#"><img alt="" src="http://st.storeland.net/6/1597/620/.jpg" style="width: 606px; height: 252px;" /></a><br />
далее в шаблоне HTML

переде кодом
</head>
вставьте
<script>
$(document).ready(function() {
$(".wqe").fancybox({
maxWidth : 10000,
maxHeight : 500,
fitToView : false,
width : '100%',
height : '100%',
content: '<img src="http://st.storeland.net/6/1606/783/2.jpg" alt="" style="width: 100%;" />',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>

Спасибо больше, все получилось)))
Обратно в Главная


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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Движение
  5. → Главная
  6. Privacy Policy