Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

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


Galyanoff

Recommended Posts

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

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

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

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

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

Надіслати
Поділитися на інших сайтах


  • 1 month later...

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

Надіслати
Поділитися на інших сайтах

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

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


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

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

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

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

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

Надіслати
Поділитися на інших сайтах


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

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

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

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

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

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

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

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

РЕШЕНО:

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

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

Надіслати
Поділитися на інших сайтах


  • 1 year later...

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

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

<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 months later...
<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 користувачів

    • Ні користувачів, які переглядиють цю сторінку
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.