О Битрикс

Детальная новость в модальном окне

Чтобы вывести детальную новость в модальном окне с помощью fancybox, при этом находясь на странице списка элементов, нужно в template.php списка новостей прописать следующий код:

<script>
   $('.detail_project').on('click', function(){
      $.fancybox({
         autoSize: true,
         href: "/ajax/project/",
         type: "ajax",
         minHeight: 600,
         ajax: {
            type: "GET",
            data: $(this).attr('data-info')
         }
      })
   });
</script>

, где .detail_project – класс кнопки

"/ajax/project/" - файл с компонентом детальной новости

'data-info' – атрибут кнопки со значение id элемента

Скрипт срабатывает при нажатии на кнопку:

<a href="#" class="detail_project" data-info="<?=$arItem["ID"]?>">Подробнее</a>

В файле /ajax/project/:

<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?>
<?
foreach($_GET as $key => $value)
{
   $elem_id = $key;
}
?>
<div class="container">
   <div class="row">
      <?$APPLICATION->IncludeComponent(
         "bitrix:news.detail",
         "projects_ajax",
         Array(
            "COMPONENT_TEMPLATE" => "projects_ajax",
             "IBLOCK_TYPE" => "aspro_scorp_content",
             "IBLOCK_ID" => "11",
             "ELEMENT_ID" => $elem_id,
             "ELEMENT_CODE" => "",
             "CHECK_DATES" => "Y",
             "FIELD_CODE" => array(0=>"NAME",1=>"DETAIL_TEXT",2=>"DETAIL_PICTURE"),
             "PROPERTY_CODE" => array(0=>"FORM_PROJECT",1=>"FORM_QUESTION"),
             "IBLOCK_URL" => "",
             "DETAIL_URL" => "",
             "AJAX_MODE" => "N",
             "AJAX_OPTION_JUMP" => "N",
             "AJAX_OPTION_STYLE" => "Y",
             "AJAX_OPTION_HISTORY" => "N",
             "AJAX_OPTION_ADDITIONAL" => "",
             "CACHE_TYPE" => "A",
             "CACHE_TIME" => "36000000",
             "CACHE_GROUPS" => "Y",
             "SET_TITLE" => "Y",
             "SET_CANONICAL_URL" => "N",
             "SET_BROWSER_TITLE" => "Y",
             "BROWSER_TITLE" => "-",
             "SET_META_KEYWORDS" => "Y",
             "META_KEYWORDS" => "-",
             "SET_META_DESCRIPTION" => "Y",
             "META_DESCRIPTION" => "-",
             "SET_LAST_MODIFIED" => "N",
             "INCLUDE_IBLOCK_INTO_CHAIN" => "Y",
             "ADD_SECTIONS_CHAIN" => "Y",
             "ADD_ELEMENT_CHAIN" => "N",
             "ACTIVE_DATE_FORMAT" => "d.m.Y",
             "USE_PERMISSIONS" => "N",
             "DISPLAY_DATE" => "Y",
             "DISPLAY_NAME" => "Y",
             "DISPLAY_PICTURE" => "Y",
             "DISPLAY_PREVIEW_TEXT" => "Y",
             "USE_SHARE" => "N",
             "PAGER_TEMPLATE" => ".default",
             "DISPLAY_TOP_PAGER" => "N",
             "DISPLAY_BOTTOM_PAGER" => "Y",
             "PAGER_TITLE" => "Страница",
             "PAGER_SHOW_ALL" => "N",
             "PAGER_BASE_LINK_ENABLE" => "N",
             "SET_STATUS_404" => "N",
             "SHOW_404" => "N",
             "MESSAGE_404" => "",
             "S_ASK_QUESTION" => "",
             "S_ORDER_PROJECT" => "",
             "T_GALLERY" => "",
             "T_DOCS" => "",
             "T_PROJECTS" => "",
             "T_CHARACTERISTICS" => ""
          )
      );?>
   </div>
</div>

Происходит вызов компонента детальной новости, где в качестве параметра ELEMENT_ID" => $elem_id передается data со значением атрибута кнопки, а именно id элемента, который необходимо вывести в модальном окне. Конечно же, для нормального отображения необходимо подключить библиотеку fancybox.

Немного подробнее в формате видео:


Возврат к списку

сайт на Bitrix

Территориально я нахожусь в Санкт-Петербурге, но могу и готова работать со всеми, вне зависимости от вашего местоположения. Вы можете написать мне через форму обратной связи, либо связаться через социальные сети. Ознакомиться с портфолио можно здесь и здесь.

Социальные сети

Рандом новостей