"Быстрый просмотр" карточки товара

Работаем в шаблоне компонента элементов раздела catalog.section.
Подключение стилей и скриптов в шаблоне компонента:

<?$APPLICATION->SetAdditionalCSS($templateFolder.'/css/bootstrap.css');
$this->addExternalJs("/bitrix/js/main/jquery/jquery-2.1.3.min.js");
$APPLICATION->AddHeadScript($templateFolder.'/js/bootstrap.js');
?>

Кнопка открытия модального окна:

<button type="button" class="btn btn-primary"
        data-toggle="modal"
        data-target="#exampleModal"
        data-name="<?=$arElement["NAME"]?>"
        data-text="<?=$arElement["DETAIL_TEXT"]?>"
        data-price="<?=$arElement["DISPLAY_PROPERTIES"]["PRICE"]["DISPLAY_VALUE"]?>"
        data-img="<?=$arElement["DETAIL_PICTURE"]["SRC"]?>"
        data-link="<?=$arElement["DETAIL_PAGE_URL"]?>">
    Быстрый просмотр
</button>

Верстка модального окна:

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"><div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <div class="col-sm-12">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">New message</h4>
                </div>
            </div>
            <div class="modal-body">
               <div class="row">
                   <div class="col-sm-4">
                       <div class="modal-img">
                       </div>
                   </div>
                   <div class="col-sm-8">
                        <div class="modal-text">
                        </div>
                   </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="col-sm-6">
                    <div class="modal-price">
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="modal-link">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Скрипт для формирования содержимого модального окна:

<script>
$('#exampleModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var name = button.data('name'),
            text = button.data('text'),
            img = button.data('img'),
            link = button.data('link'),
            price = button.data('price');
        var modal = $(this);
        modal.find('.modal-title').text(name);
        modal.find('.modal-img').html("<img src='"+img+"'/>");
        modal.find('.modal-text').html(text);
        modal.find('.modal-price').text("Цена: " + price);
        modal.find('.modal-link').html("<a class='btn btn-primary' href='" + link + "'>Подробнее</a>");
    })
</script>

Более подробно в формате видео: