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

Тема в разделе "Инструкции и 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.108
    Симпатии:
    860
    Получения текста для модального окна по ссылке!

    В файле 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 Продвинутый пользователь

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

    klaus_sv Новичок

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

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

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

    Ravilr Специалист

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

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

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

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