Вывести информацию в модальном окне

Тема в разделе "Инструкции и FAQ", создана пользователем my2you, 26 сен 2015.

  1. my2you

    my2you Продвинутый пользователь

    Сообщения:
    278
    Симпатии:
    121
    Иногда необходимо прямо в статье вывести информацию.
    Нет ничего проще.

    Заходим в редактирование статьи, переходим в режим исходника (кнопка Исходный код) и там добавляем наш код согласно документации бутсрап http://getbootstrap.com/javascript/#modals

    Пример:

    Код:
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Нажми!
    </button>
    
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
           Вот оно!! оооооо
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
          </div>
        </div>
      </div>
    </div>
     
    Vlad, AmigoV, Ален и 3 другим нравится это.
  2. Ravilr

    Ravilr Специалист

    Сообщения:
    3.375
    Симпатии:
    940
    Получения текста для модального окна по ссылке!

    В файле common.js вставим
    Код:
    $(document).delegate('a.clickmodal', 'click', function(e) {
        e.preventDefault();
    
        $('#modal-inf').remove();
    
        var element = this;
    
        $.ajax({
            url: $(element).attr('href'),
            type: 'get',
            dataType: 'html',
            success: function(data) {
                html  = '<div id="modal-inf" class="modal">';
                html += '  <div class="modal-dialog">';
                html += '    <div class="modal-content">';
                html += '      <div class="modal-header">';
                html += '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>';
                html += '        <h4 class="modal-title">' + $(element).text() + '</h4>';
                html += '      </div>';
                html += '      <div class="modal-body">' + $('#content', data).html() + '</div>';
                html += '    </div';
                html += '  </div>';
                html += '</div>';
    
                $('body').append(html);
    
                $('#modal-inf').modal('show');
            }
        });
    });
    а теперь создаем ссылку на статью с классом clickmodal
    например
    Код:
    <a href="http://op-test/delivery/" class="clickmodal">Доставка</a>
    Вот и все. В модальном окне будет текст статьи которая указана в ссылке.

    Внимание! Поиск контента в статье идет по #content так что проверяйте свои темы.
     
    SiteMix, klaus_sv, Bkmz и 5 другим нравится это.
  3. optimlab

    optimlab Продвинутый пользователь

    Сообщения:
    884
    Симпатии:
    227
    А если продолжить идею и связать это с формой обратной связи, то можно получить Обратный звонок. Но я это тут писать не буду по этическим соображениям, так как есть готовый и доступный модуль по низкой цене.
     
    Последнее редактирование: 21 дек 2015
  4. klaus_sv

    klaus_sv Новичок

    Сообщения:
    5
    Симпатии:
    0
    Это очень круто. Спасибо огромное
     
  5. SiteMix

    SiteMix Продвинутый пользователь

    Сообщения:
    751
    Симпатии:
    129
    А можно ли этот скрипт вставить непосредственно в файл product.tpl? Хотелось бы сделать модификатором, но вроде бы модификатор не работает с файлом common.js
     
  6. Ravilr

    Ravilr Специалист

    Сообщения:
    3.375
    Симпатии:
    940
    Да, конечно можно.
     
  7. SiteMix

    SiteMix Продвинутый пользователь

    Сообщения:
    751
    Симпатии:
    129
    Ур-р-ра! Заработало!

    Спасибо за полезный скрипт :)
     
  8. artem_119

    artem_119 Новичок

    Сообщения:
    3
    Симпатии:
    1
    Подскажите как сделать в product.tpl? Добавил класс
    <div class="image"><a href="<?php echo $product['href']; ?>" class="clickmodal"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" class="img-responsive" /></a></div>

    <h4><a href="<?php echo $product['href']; ?>" class="clickmodal"><?php echo $product['name']; ?></a></h4>

    Но кнопка купить не работает.
     
  9. Tom

    Tom Активный пользователь

    Сообщения:
    129
    Симпатии:
    29
    Не работает потому что и не должна.
    То что выше применимо к тексту. В вашем случае нужно видимо создать как минимум три файла
    • контроллер
    • языковой файл
    • тплку
    Вот эту самую тплку, обернуть в класс , который вы будете вызывать в модальном окне.
    А то что вы сделали и не должно так работать.