Нужен модуль PopUp для сайта на ShopCMS

R1
На сайте с 06.06.2012
Offline
33
932

Нужен модуль PopUp для сайта. Сайт на ShopCMS. Нужна гибкая настройка (не просто вывод статичных изображений). Возможность выводить в popup различные формы с полями. В идеале с возможностью верстки этих форм.

Можем как и купить модуль, так и оплатить его создание. Нужен очень срочно!

L
На сайте с 16.10.2014
Offline
108
#1

ну если быстро то проще поставить обычный поп ап и сделать в нутри все что необходима.... могу поделиться рабочим , но это не модуль

Купить автомобиль из США можно тут (https://us-car.com.ua)
R1
На сайте с 06.06.2012
Offline
33
#2
lexter:
ну если быстро то проще поставить обычный поп ап и сделать в нутри все что необходима.... могу поделиться рабочим , но это не модуль

Я почему то думал, что popup там только модулем. Если есть рабочий, давайте! Буду очень признателен!

L
На сайте с 16.10.2014
Offline
108
#3

Скрипт в хед если вдруг не заработает поменяйте все jQuery на $

<script>

jQuery(document).ready(function() {

jQuery('body').append('<div id="blackout"></div>');

var boxWidth = 400;
function centerBox() {

/* определяем нужные данные */
var winWidth = jQuery(window).width();
var winHeight = jQuery(document).height();
var scrollPos = jQuery(window).scrollTop();

/* Вычисляем позицию */

var disWidth = (winWidth - boxWidth) / 2
var disHeight = scrollPos + 150;

/* Добавляем стили к блокам */
jQuery('.popup-box').css({'width' : boxWidth+'px', 'left' : disWidth+'px', 'top' : disHeight+'px'});
jQuery('#blackout').css({'width' : winWidth+'px', 'height' : winHeight+'px'});

return false;
}
jQuery('[class*=popup-link]').click(function(e) {

/* Предотвращаем действия по умолчанию */
e.preventDefault();
e.stopPropagation();

/* Получаем id (последний номер в имени класса ссылки) */
var name = jQuery(this).attr('class');
var id = name[name.length - 1];
var scrollPos = jQuery(window).scrollTop();

/* Корректный вывод popup окна, накрытие тенью, предотвращение скроллинга */
jQuery('#popup-box-'+id).show();
jQuery('#blackout').show();
jQuery('html,body').css('overflow', 'hidden');

/* Убираем баг в Firefox */
jQuery('html').scrollTop(scrollPos);
});
jQuery(window).resize(centerBox);
jQuery(window).scroll(centerBox);
centerBox();
jQuery('[class*=popup-box]').click(function(e) {
/* Предотвращаем работу ссылки, если она являеться нашим popup окном */
e.stopPropagation();
});
jQuery('html').click(function() {
var scrollPos = jQuery(window).scrollTop();
/* Скрыть окно, когда кликаем вне его области */
jQuery('[id^=popup-box-]').hide();
jQuery('#blackout').hide();
jQuery("html,body").css("overflow","auto");
jQuery('html').scrollTop(scrollPos);
});
jQuery('.close').click(function() {
var scrollPos = jQuery(window).scrollTop();
/* Скрываем тень и окно, когда пользователь кликнул по X */
jQuery('[id^=popup-box-]').hide();
jQuery('#blackout').hide();
jQuery("html,body").css("overflow","auto");
jQuery('html').scrollTop(scrollPos);
});
});

</script>

Сама html

<a  class="popup-link-1" href="">TEXT</a>



<div class="popup-box" id="popup-box-1">
<div class="close">X</div>
<div class="top">
<h2>Some Title Goes Here:</h2>
</div>
<div class="bottom">
Some more content, for when you want to add a little bit more
</div>
</div>

CSS


.popup-box {
position: absolute;
border-radius: 5px;
background: #fff;
display: none;
box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
font-family: Arial, sans-serif;
z-index: 9999999;
font-size: 14px;
}

.popup-box .close {
position: absolute;
top: 0px;
right: 0px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
cursor: pointer;
color: #434343;
padding: 20px;
font-size: 20px;
}

.popup-box .close:hover {
color: #000;
}

.popup-box h2 {
padding: 0;
margin: 0;
font-size: 18px;
}
.popup-box .top {
padding: 20px;
}

.popup-box .bottom {
background: #eee;
border-top: 1px solid #e5e5e5;
padding: 20px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}

#blackout {
background: rgba(0,0,0,0.3);
position: absolute;
top: 0;
overflow: hidden;
z-index: 999999;
left: 0;
display: none;
}

Вроде все копирнул , ставьте , если что пишите

L
На сайте с 10.12.2014
Offline
0
#4
lexter:
Скрипт в хед если вдруг не заработает поменяйте все jQuery на $
<script>

jQuery(document).ready(function() {

jQuery('body').append('<div id="blackout"></div>');

var boxWidth = 400;
function centerBox() {

/* определяем нужные данные */
var winWidth = jQuery(window).width();
var winHeight = jQuery(document).height();
var scrollPos = jQuery(window).scrollTop();

/* Вычисляем позицию */

var disWidth = (winWidth - boxWidth) / 2
var disHeight = scrollPos + 150;

/* Добавляем стили к блокам */
jQuery('.popup-box').css({'width' : boxWidth+'px', 'left' : disWidth+'px', 'top' : disHeight+'px'});
jQuery('#blackout').css({'width' : winWidth+'px', 'height' : winHeight+'px'});

return false;
}
jQuery('[class*=popup-link]').click(function(e) {

/* Предотвращаем действия по умолчанию */
e.preventDefault();
e.stopPropagation();

/* Получаем id (последний номер в имени класса ссылки) */
var name = jQuery(this).attr('class');
var id = name[name.length - 1];
var scrollPos = jQuery(window).scrollTop();

/* Корректный вывод popup окна, накрытие тенью, предотвращение скроллинга */
jQuery('#popup-box-'+id).show();
jQuery('#blackout').show();
jQuery('html,body').css('overflow', 'hidden');

/* Убираем баг в Firefox */
jQuery('html').scrollTop(scrollPos);
});
jQuery(window).resize(centerBox);
jQuery(window).scroll(centerBox);
centerBox();
jQuery('[class*=popup-box]').click(function(e) {
/* Предотвращаем работу ссылки, если она являеться нашим popup окном */
e.stopPropagation();
});
jQuery('html').click(function() {
var scrollPos = jQuery(window).scrollTop();
/* Скрыть окно, когда кликаем вне его области */
jQuery('[id^=popup-box-]').hide();
jQuery('#blackout').hide();
jQuery("html,body").css("overflow","auto");
jQuery('html').scrollTop(scrollPos);
});
jQuery('.close').click(function() {
var scrollPos = jQuery(window).scrollTop();
/* Скрываем тень и окно, когда пользователь кликнул по X */
jQuery('[id^=popup-box-]').hide();
jQuery('#blackout').hide();
jQuery("html,body").css("overflow","auto");
jQuery('html').scrollTop(scrollPos);
});
});

</script>


Сама html

<a  class="popup-link-1" href="">TEXT</a>



<div class="popup-box" id="popup-box-1">
<div class="close">X</div>
<div class="top">
<h2>Some Title Goes Here:</h2>
</div>
<div class="bottom">
Some more content, for when you want to add a little bit more
</div>
</div>


CSS


.popup-box {
position: absolute;
border-radius: 5px;
background: #fff;
display: none;
box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
font-family: Arial, sans-serif;
z-index: 9999999;
font-size: 14px;
}

.popup-box .close {
position: absolute;
top: 0px;
right: 0px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
cursor: pointer;
color: #434343;
padding: 20px;
font-size: 20px;
}

.popup-box .close:hover {
color: #000;
}

.popup-box h2 {
padding: 0;
margin: 0;
font-size: 18px;
}
.popup-box .top {
padding: 20px;
}

.popup-box .bottom {
background: #eee;
border-top: 1px solid #e5e5e5;
padding: 20px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}

#blackout {
background: rgba(0,0,0,0.3);
position: absolute;
top: 0;
overflow: hidden;
z-index: 999999;
left: 0;
display: none;
}




Вроде все копирнул , ставьте , если что пишите

а можешь написать куда какой код вставлять? на пальцах, для чайника

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий