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

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

Заходим в редактирование статьи, переходим в режим исходника (кнопка Исходный код) и там добавляем наш код согласно документации бутсрап 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>

 

Получения текста для модального окна по ссылке!

В файле 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 так что проверяйте свои темы.

 

А если продолжить идею и связать это с формой обратной связи, то можно получить Обратный звонок. Но я это тут писать не буду по этическим соображениям, так как есть готовый и доступный модуль по низкой цене.

 

Это очень круто. Спасибо огромное

 

А можно ли этот скрипт вставить непосредственно в файл product.tpl? Хотелось бы сделать модификатором, но вроде бы модификатор не работает с файлом common.js

 

Да, конечно можно.

 

Ур-р-ра! Заработало!

Спасибо за полезный скрипт

 

Подскажите как сделать в 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>

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

 

Не работает потому что и не должна.
То что выше применимо к тексту. В вашем случае нужно видимо создать как минимум три файла

• контроллер
• языковой файл
• тплку

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