Форум программистов, компьютерный форум, киберфорум
Наши страницы
1С Битрикс
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/5: Рейтинг темы: голосов - 5, средняя оценка - 5.00
Цитадель
0 / 0 / 0
Регистрация: 26.07.2017
Сообщений: 37
1

Вывести ID элемента news.list в URL

07.06.2018, 16:59. Просмотров 1030. Ответов 3

Добрый день. Есть: компонент news.list. Выводится список из трех акций, при клике на которые всплывают модальные окна с анонсом элемента, URL при этом не изменяется и остается вида domain.ru.
Что нужно: чтобы при клике на каждую из акций менялся URL таким образом, чтобы его можно было скопировать, вставить в поисковую строку в новой вкладке, и увидеть страницу с уже открытым попапом.
Короче грубо говоря нужно сделать прямые ссылки на всплывающие окна.
Думаю, надо как-то id элемента передавать в url.
Подскажите пожалуйста как реализовать.

Добавлено через 15 минут
Разметка элемента:

HTML5
1
2
3
4
5
6
7
8
9
10
<li class="spec-item bounceInUp wow" id="bx_348" data-wow-delay="0.5s" data-wow-offset="100" style="visibility: visible; animation-delay: 0.5s; animation-name: bounceInUp;">
      <a href="#"><img src="/upload/iblock/image.jpg" alt="alt" width="310" height="200">
      </a>
      <div class="spec-popup" style="display:none;">
             <div class="pp-wrapp">
                     <div class="pp-title">Название элемента</div>
                     <div class="pp-text">Текст анонса элемента</div>
             </div>
    </div>
</li>
Добавлено через 2 минуты
Открытие модального окна:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function initPopupActions(){ 
    $('#spec .spec-wrap ul.spec-list li.spec-item').click(function(event){
        event.preventDefault();
        var html = $(this).find('.spec-popup').html();
        $('#spec-popup').show().append(html);
        var width = $('#spec-popup').outerWidth()/2;
        var height = $('#spec-popup').outerHeight()/2;
        $('#spec-popup').css('margin-left', "-"+width+"px");
        $('#spec-popup').css('margin-top', "-"+height+"px");
        $('#spec-overlay').addClass('popup-active');
        $('#spec-overlay.popup-active, #spec-popup .pp-close').click(function(){
            $('#spec-overlay').removeClass('popup-active');
            $('#spec-popup .pp-wrapp').remove();
            $('#spec-popup').hide();
        });
    });
}
0
Лучшие ответы (1)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
07.06.2018, 16:59
Ответы с готовыми решениями:

Отмена правки элемента элемента news.list
Здравствуйте! Я изменил шаблон одного элемента news.list, (включил режим правки, -&gt; редактировать...

Инфоблок без уровня news.list, а только с news.detail
С пятницей! (Вдруг здесь кто-то есть, в отличие от dev.1c-bitrix.ru :)) Клиент не захотел, чтобы в...

Цикл в bitrix:news.list
Друзья, подскажите, как сделать, что бы после каждой третей новости закрывался и открывался вновь...

Детальная страница в news.list
Здравствуйте уважаемые коллеги, прошу помочь разобраться с простым компонентом bitrix:news.list ...

Сложный фильтр в news.list
Есть компонент news.list, который выводит список объявлений со всех разделов (продам, куплю, и...

3
voral
941 / 631 / 142
Регистрация: 16.03.2008
Сообщений: 2,979
07.06.2018, 22:59 2
Лучший ответ Сообщение было отмечено Цитадель как решение

Решение

Это вопрос скорее из раздела JavaScript.
Вам нужны функции работы с историей браузера.. Конкретно эта:

Javascript
1
history.pushState(data, description, url);
Но, этот функционал поддерживают не все браузеры. Для более старых увы - решения нет
1
Цитадель
0 / 0 / 0
Регистрация: 26.07.2017
Сообщений: 37
08.06.2018, 13:39  [ТС] 3
Спасибо, буду копать в эту сторону. Но все-равно сложно разобраться, можете помочь?
Блок с акциями завернут в div с id "spec"
Таким образом при переходе по ссылке domain.ru/#spec пользователь оказывается на нужной области лендинга.
По сути url модального окна должен выглядеть так: domain.ru/#spec/ELEMENT_ID, чтобы при нажатии лендинг прокручивался вниз до нужной области с уже открытым попапом.
Сложность в том 1. что пока не получается передать айдишник элемента в шаблон списка новостей, но это ладно, и
2. возможно, очень глупый вопрос, но почему если задавать активному модальному окну id например "modal", то при переходе по ссылке domain.ru/#spec/#modal показывается страница так, как если бы пользователь перешел по domain.ru? =)
0
voral
941 / 631 / 142
Регистрация: 16.03.2008
Сообщений: 2,979
08.06.2018, 14:44 4
1. Вообще они там уже есть - внимательно изучите массив $arResult в шаблоне компонента (сделайте, например, print_r - только если сайт боевой, вывод в скрытый блок)

2. Для начала символ "#" имеет совершенно определенное значение в URL и не надо их там больше одного. Его назначение перемотать указанную страницу к якорю с заданным id (символы следующие за #)

т.е. страницы domain.ru и domain.ru/#modal это будет одна и та же страница только во втором случае она перемотается до якоря
HTML5
1
<a id="modal"></a>
Более того сервер в принципе не может показать ни чего другого, т.к. все что идет после символа # на сервер не отправляется.
По этому, браузер автоматически перемотает страницу к якорю, а вот попап вы должны открыть сами при помощи javascript. Там уже можно эти хеши анализировать
1
08.06.2018, 14:44
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
08.06.2018, 14:44

Как разместить bitrix::news компонент в шаблоне компонента news::detail другого bitrix::news?
Доброго времени суток, не так давно окунулся в мир битрикс разработки и передо мной встал следующий...

Сравнение дат в шаблоне news.list
Здравствуйте! Нужно вывести мероприятия, удовлетворяющие следующему условию: (Дата проведения &lt;=...

Вывод доп. картинок в модуле news.list
Доброго времени суток! Нашел статью вывод доп картинок в детальной новости, но не как не могу...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru