Перейти к содержанию
Galyanoff

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

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

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

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

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

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

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

Поделиться сообщением


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

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

Поделиться сообщением


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

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

Поделиться сообщением


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

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

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

Поделиться сообщением


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

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

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

Поделиться сообщением


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

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

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

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

Поделиться сообщением


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

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

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

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

Поделиться сообщением


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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
<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 и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.