Чтобы вывести детальную новость в модальном окне с помощью 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.
Немного подробнее в формате видео: