Jump to content
Sign in to follow this  
Galyanoff

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

Recommended Posts

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

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

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

Share this post


Link to post
Share on other sites

KaReGlAzKa

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

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

Share this post


Link to post
Share on other sites

KaReGlAzKa

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

  • +1 2

Share this post


Link to post
Share on other sites

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

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

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

РЕШЕНО:

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

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

Share this post


Link to post
Share on other sites

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

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

<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

Share this post


Link to post
Share on other sites

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

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
<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> 

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

Share this post


Link to post
Share on other sites

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

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

 

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.