Модальное окно с информацией

[Galyanoff]

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

Как можно реализовать модальное (всплывающее окно) с информацией?

В статье ссылка, при нажатии должно появится окно с текстом, возможно еще пара картинок.

Как забацать такое?

Сейчас думаю на голом CSS сделать, если получится отпишусь.

[KaReGlAzKa]

Интересует данный вопрос, если что-то найду, поделюсь.

[ravilr]

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

[Galyanoff]

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

Да, я уже смотрел. Еще не разбирался, отпала пока эта необходимость. Но если Вы подскажете, то это упростит задачу)

[ravilr]

Модальное окно в статьях.

Пример действителен для версий оксторе 1.5.2.1 до текущей 1.5.4.1

Открываем статью, нажимаем кнопку Источник и добавляем код с информацией

<script>
$(document).ready(function(){
$(".inline").colorbox({inline:true, width:"50%"});
});
</script>
<p>
<a class="inline" href="#in1">Информация1</a>
</p>
<p>
<a class="inline" href="#in2">Информация2</a>
</p>
<div style="display:none">

<div id="in1" style="padding:10px; background:#fff;">
Информация111111 трам пам пам
</div>

<div id="in2" style="padding:10px; background:#fff;">
Информация22222 трам пам пам
</div>
</div>

[KaReGlAzKa]

не совсем удобно, для моего случая, так как мне нужно выводить это окно на странице товара, а именно, добавление в код страницы небольшой ссылки.

в моем случаи, решение, это создание отдельной html страницы и добавление на нее ссылку.

минусы в том, что любое редактирование будут происходить в коде, а не как бы хотелось, через админку.

[Galyanoff]

не совсем удобно, для моего случая, так как мне нужно выводить это окно на странице товара, а именно, добавление в код страницы небольшой ссылки.

в моем случаи, решение, это создание отдельной html страницы и добавление на нее ссылку.

минусы в том, что любое редактирование будут происходить в коде, а не как бы хотелось, через админку.

Чтобы в админке, это надо модуль делать. Я лично не вижу ничего сложного, чтобы в коде прописать пару строк. Для меня открыть Notepad++ гораздо быстрей чем зайти в админку)

[ravilr]

KaReGlAzKa

ну ну.... написал же про условия... да бестолку вроде.....

вот что у вас по ссылке выходит?? так нельзя разве??

[KaReGlAzKa]

KaReGlAzKa

ну ну.... написал же про условия... да бестолку вроде.....

вот что у вас по ссылке выходит?? так нельзя разве??

Попробую еще по Вашей методике, может что-то не до понял.

[sobwoofer]

http://www.opencart.com/index.php?route=extension/extension/info&extension_id=6212&filter_search=popup

[ravilr]

на всякий случай если не разобрались ))

Модальное окно в статьях с информацией из внешней ссылке.

Пример действителен для версий оксторе 1.5.2.1 до текущей 1.5.4.1

Открываем статью, нажимаем кнопку Источник и добавляем код с информацией

<a class="colorbox" href="./index.php?route=information/information/info&information_id=5">Информация</a>
<script type="text/javascript"><!--
$('.colorbox').colorbox({
width: 640,
height: 480
});
//--></script>

[KaReGlAzKa]

на всякий случай если не разобрались ))

Модальное окно в статьях с информацией из внешней ссылке.

Пример действителен для версий оксторе 1.5.2.1 до текущей 1.5.4.1

Открываем статью, нажимаем кнопку Источник и добавляем код с информацией

<a class="colorbox" href="./index.php?route=information/information/info&information_id=5">Информация</a>
<script type="text/javascript"><!--
$('.colorbox').colorbox({
width: 640,
height: 480
});
//--></script>

Подскажите пожалуйста, так как я не понимаю, как все происходит. Кратко о том что я делаю и что нужно:

- создал в админке статью, с описанием.

- в файле catalog\view\theme\default\template\product\product.tpl дописываю строку:

<a class="colorbox" href="/size-net.php">Таблицы размеров</a>

- ссылка на страницу с созданной статьей href="/size-net.php"

Вот что получаю:

Это все открывается в модульном окне. И самое обидное, что я понимаю почему так открывается, ссылка добавлена на всю страницу, а вот какую вставить ссылку что выводилось только то что в красном поле, я не пойму.

[ravilr]

ссылку в формате index.php?route=information/information/info&information_id=5

тогда на выходе только текст, а не страница!

[KaReGlAzKa]

ссылку в формате index.php?route=information/information/info&information_id=5

тогда на выходе только текст, а не страница!

Спасибо, разобрался. Путаница была из-за включенного чпу и изначально прописанного url для статьи (магазин/size-net.php), по этому, я не мог понять в каком формате должна быть ссылка.

РЕШЕНО:

Для модального окна с выводом только статьи, ссылка должна быть в формате, как указал уважаемый "ravilr", без учета прописного вашего url.

В моем случаи - index.php?route=information/information/info&information_id=7

[ka4an]

А как сделать модальное окно на странице товара? Чтобы выводить, например, условия возврата, доставки.

Пробовал этим способом:

<a class="colorbox" href="./index.php?route=information/information/info&information_id=5">Информация</a>
<script type="text/javascript"><!--
$('.colorbox').colorbox({
width: 640,
height: 480
});
//--></script>

Работает, но открывается вся страница, а не текст.

Ссылку указывал так: index.php?route=information/information&information_id=7

 

ocStore 1.5.4.1

[afwollis]

Пробовал этим способом:

<a class="colorbox" href="./index.php?route=information/information/info&information_id=5">Информация</a>...

...

Ссылку указывал так: index.php?route=information/information&information_id=7

сравнивай по символам, если не видишь разницу.

или вообще не лезь, если не понимаешь, че делаешь.

[Tom]

А как сделать модальное окно на странице товара? Чтобы выводить, например, условия возврата, доставки.

Пробовал этим способом:

<a class="colorbox" href="./index.php?route=information/information/info&information_id=5">Информация</a>
<script type="text/javascript"><!--
$('.colorbox').colorbox({
width: 640,
height: 480
});
//--></script>

Работает, но открывается вся страница, а не текст.

Ссылку указывал так: index.php?route=information/information&information_id=7

 

ocStore 1.5.4.1

<a class="colorbox" href="./index.php?route=information/information/info&information_id=XX">НАЗВАНИЕ</a>


   <script type="text/javascript">
        jQuery.colorbox.settings.maxWidth  = '95%';
        jQuery.colorbox.settings.maxHeight = '95%';


        var resizeTimer;
        function resizeColorBox()
        {
            if (resizeTimer) clearTimeout(resizeTimer);
            resizeTimer = setTimeout(function() {
                if (jQuery('#cboxOverlay').is(':visible')) {
                    jQuery.colorbox.load(true);
                }
            }, 300);
        }


        jQuery(window).resize(resizeColorBox);
        window.addEventListener("orientationchange", resizeColorBox, false);
    </script> 

[ka4an]

Спасибо! Все получилось! :-)

[igorfelix]

<a class="colorbox" href="./index.php?route=information/information/info&information_id=XX">НАЗВАНИЕ</a>


   <script type="text/javascript">
        jQuery.colorbox.settings.maxWidth  = '95%';
        jQuery.colorbox.settings.maxHeight = '95%';


        var resizeTimer;
        function resizeColorBox()
        {
            if (resizeTimer) clearTimeout(resizeTimer);
            resizeTimer = setTimeout(function() {
                if (jQuery('#cboxOverlay').is(':visible')) {
                    jQuery.colorbox.load(true);
                }
            }, 300);
        }


        jQuery(window).resize(resizeColorBox);
        window.addEventListener("orientationchange", resizeColorBox, false);
    </script> 

Спасибо, то что нужно 

[nadim]

Подскажите сделал в карточке товара модальное окно - работает. Но появился вопрос, почему в этом окне не работают вкладки?

Хотя в статье они работают, а в модальном окне даже не появляются.

 

В статье для вкладок такой код:

<div class="htabs" id="tabs">

<a href="#tab1">Текст1</a> <a href="#tab2">Текст2</a> <a href="#tab3">Текст3</a></div>

<div class="tab-content" id="tab1">

..............

[Tom]

Не проверял.Но чисто логически если,то во вкладках(табах) используется скрипт.Который и не подхватывается в модальном окне.

[chukcha]

вкладки не работают в модальном окне?

 

А с чего бы им работать, если не привязаны события.

[nadim]

тогда подскажите как их привязать - если можете.

[chukcha]

у colorbox есть различные callback'и (изучайте документацию)

К ним и нужно привязать скрипты для инициализации табов.

[nadim]

Если есть готовое решение - поделитесь.