Перейти к публикации
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...

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


Galyanoff
 Поделиться

Рекомендованные сообщения

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

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

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

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

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

Ссылка на комментарий
Поделиться на других сайтах


  • 1 месяц спустя...

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

Ссылка на комментарий
Поделиться на других сайтах

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

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


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

Пример действителен для версий оксторе 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>
  • +1 3
Ссылка на комментарий
Поделиться на других сайтах

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

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

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

Ссылка на комментарий
Поделиться на других сайтах


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

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

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

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


KaReGlAzKa

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

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

Ссылка на комментарий
Поделиться на других сайтах

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>
  • +1 3
Ссылка на комментарий
Поделиться на других сайтах

  • 2 недели спустя...

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

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

Пример действителен для версий оксторе 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"

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

image.png

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

Ссылка на комментарий
Поделиться на других сайтах


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

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

  • +1 2
Ссылка на комментарий
Поделиться на других сайтах

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

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

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

РЕШЕНО:

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

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

Ссылка на комментарий
Поделиться на других сайтах


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

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

Ссылку указывал так: 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=5">Информация</a>...
...

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

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

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

Ссылка на комментарий
Поделиться на других сайтах

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

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

<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> 
Ссылка на комментарий
Поделиться на других сайтах

  • 6 месяцев спустя...
<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> 

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

Ссылка на комментарий
Поделиться на других сайтах


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

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

 

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

<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">
..............
Ссылка на комментарий
Поделиться на других сайтах


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

Ссылка на комментарий
Поделиться на других сайтах

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

 

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

Ссылка на комментарий
Поделиться на других сайтах

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

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

Ссылка на комментарий
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
 Поделиться

  • Сейчас на странице   0 пользователей

    • Нет пользователей, просматривающих эту страницу.
×
×
  • Создать...

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.