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

33

redq123

27 ноября 2014, 08:37

932

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

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

L

108

lexter

27 ноября 2014, 08:50

#1

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

Купить автомобиль из США можно тут (https://us-car.com.ua)

R1

33

redq123

27 ноября 2014, 09:27

#2

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

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

L

108

lexter

27 ноября 2014, 09:53

#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

0

lgfunn

10 декабря 2014, 17:30

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

}

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

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

Яндекс Вебмастер вынес товарные фиды в отдельный раздел

Что такое Power BI и зачем это нужно бизнесу