For Anya Melnik

ОТКРЫТЬ СПИСКОМ

ЗАГОЛОВОК

ВЕРНУТЬСЯ К КАРТЕ

Как сделать:

1. Добавь кнопке, которая должна открывать блоки класс button-open, а закрывающей кнопке класс button-close.
2. Проверь, чтобы у блоков, которые будут показаны при клике было выключено появление при скролле в настройках блоков (если эффект не будет выключен - код работать не будет).
3. Добавь в форму ID блоков, которые нужно показать при клике на кнопку через запятую.
4. Добавь в форму фон блока с потоками при необходимости. Это нужно, чтобы на экранах с разрешением больше 1920px внизу не было видно блок с планетой.
5. Вставь скопированный код в блок T123.
6. Если код не сработает скинь мне ссылку на страницу или скришот консоли с ошибками. Для этого нужно нажать CTRL + SHIFT + I и наверху появившейся панели/окна выбрать Console.

 <style>
    .body--hidden {
        height: 100vh;
        min-height: 100vh;
        overflow: hidden;
    }
    .block--hidden {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 10000;
        will-change: transform;
        transform: translateY(100%);
        -webkit-transform: translateZ(0);
        background-color: #37a35e;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        pointer-events: none;
    }

    .button-open,
    .button-close {
        cursor: pointer;
    }

    @supports (-webkit-touch-callout: none) {
        .block--hidden {
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
        }
    }
</style>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        let idHiddenBlock = ["#rec363402380","#rec363400037"];
        let allrecordsBlock = document.querySelector('#allrecords');
        let openButton = document.querySelector('.button-open');
        let closeButton = document.querySelector('.button-close');


        let blockHidden = document.createElement('div');
        let blockHiddenContent = document.createElement('div');
        blockHidden.classList.add('block--hidden');
        blockHiddenContent.classList.add('block--hidden__content');
        allrecordsBlock.appendChild(blockHidden);
        blockHidden.appendChild(blockHiddenContent);
        
        blockHidden.setAttribute('style', 'opacity: 0; pointer-events: none; transform: translateY(100%); transition: transform 0.4s ease-in-out, opacity 0.2s ease-in-out; transition-delay: 0s, 0.3s; transition-property: transform, opacity;');

        for (let i = 0; i < idHiddenBlock.length; i += 1) {
            let domHiddenBlock = document.querySelector(idHiddenBlock[i]);
            blockHiddenContent.appendChild(domHiddenBlock);
        }
        
        
        if (window.matchMedia("(max-width: 480px)").matches) {
            let element = document.querySelector('.t-screenmin-480px');
            element.remove();
            openButton = document.querySelector('.button-open');
            closeButton = document.querySelector('.button-close');
        } else if (window.matchMedia("(min-width: 480px)").matches) {
            let element = document.querySelector('.t-screenmax-480px');
            element.remove();
            openButton = document.querySelector('.button-open');
            closeButton = document.querySelector('.button-close');
        }


        if (openButton) {
            openButton.addEventListener('click', function () {
                blockHidden.setAttribute('style', 'opacity: 1; pointer-events: auto; overflow-y: scroll; transform: translateY(0); transition: transform 0.4s ease-in, opacity 0s ease-in;transition-delay: 0.2s, 0s; transition-property: transform, opacity;');
                document.body.classList.add('body--hidden');


                let allImage = document.querySelectorAll('.t-feed__post-bgimg.t-bgimg');
                let moreNews = document.querySelector('.js-feed-btn-show-more');
                let openButtonPopup = document.querySelectorAll('.js-feed-post-link');

                function popupOpen() {
                    openButtonPopup.forEach(el => {
                        el.addEventListener('click', function () {
                            blockHidden.style.overflowY = 'hidden';
                            let popupBlock = document.querySelector('.t-popup_show');
                            let closeButtonPopup = document.querySelector('.t-popup__close');
                            let popupBlockMenu = document.querySelector('.t-feed__post-popup__close-wrapper');
                            let popupBlockTop = $('.block--hidden').scrollTop();

                            popupBlock.style.top = popupBlockTop + 'px';
                            popupBlockMenu.style.top = popupBlockTop + 'px';

                            closeButtonPopup.addEventListener('click', function () {
                                blockHidden.style.overflowY = 'scroll';
                            })
                        })
                    })
                }

                popupOpen();


                allImage.forEach(img => {
                    img.classList.add('loaded');
                    let imageSrc = img.getAttribute('data-original');
                    img.style.backgroundImage = `url('${imageSrc}')`;
                })


                moreNews.addEventListener('click', function () {
                    window.setTimeout(function () {
                        openButtonPopup = document.querySelectorAll('.js-feed-post-link');
                        popupOpen();
                    }, 1000);
                })
            })
        }

        closeButton.addEventListener('click', function () {
            blockHidden.setAttribute('style', 'opacity: 0; pointer-events: none; transform: translateY(100%); transition: transform 0.4s ease-in-out, opacity 0.2s ease-in-out; transition-delay: 0s, 0.3s; transition-property: transform, opacity;');
            document.body.classList.remove('body--hidden');
        })
    })
</script>

Код с комментариями

 <style>
    /* Класс для body */
    .body--hidden {
        height: 100vh;
        min-height: 100vh;
        overflow: hidden;
    }
    /* Класс для окна */
    .block--hidden {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 10000;
        will-change: transform;
        transform: translateY(100%);
        -webkit-transform: translateZ(0);
        background-color: #37a35e;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        pointer-events: none;
    }

    /* Делаем кнопки cursor pointer */
    .button-open,
    .button-close {
        cursor: pointer;
    }

    /* Перемотка для Safari */
    @supports (-webkit-touch-callout: none) {
        .block--hidden {
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
        }
    }
</style>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        let idHiddenBlock = ["#rec363374474","#rec363374577"];
        let allrecordsBlock = document.querySelector('#allrecords');
        let openButton = document.querySelector('.button-open');
        let closeButton = document.querySelector('.button-close');

        // Создаю два div
        let blockHidden = document.createElement('div');
        let blockHiddenContent = document.createElement('div');
        blockHidden.classList.add('block--hidden');
        blockHiddenContent.classList.add('block--hidden__content');
        // Добавляю первый div в блок #allrecords
        allrecordsBlock.appendChild(blockHidden);
        // В первый блок добавляю второй
        // Первому блоку добавлена перемотка, иначе не работает в safari
        blockHidden.appendChild(blockHiddenContent);
        
        // Скрываю блок, чтобы его не показало при загрузке
        blockHidden.setAttribute('style', 'opacity: 0; pointer-events: none; transform: translateY(100%); transition: transform 0.4s ease-in-out, opacity 0.2s ease-in-out; transition-delay: 0s, 0.3s; transition-property: transform, opacity;');
    
        //Тут можно сделать что-то для сафари
        const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

        if (isSafari) {
           console.log('Safari');
        } else {
            console.log('Not Safari');
        }
        
        // Отслеживаю блоки по тильда-классам
        // Далее удаляю то, что не должно отображаться, чтобы кнопки были в единичном экземпляре
        if (window.matchMedia("(max-width: 480px)").matches) {
            let element = document.querySelector('.t-screenmin-480px');
            element.remove();
            openButton = document.querySelector('.button-open');
            closeButton = document.querySelector('.button-close');
        } else if (window.matchMedia("(min-width: 480px)").matches) {
            let element = document.querySelector('.t-screenmax-480px');
            element.remove();
            openButton = document.querySelector('.button-open');
            closeButton = document.querySelector('.button-close');
        }

        //Копирую во второй блок блоки, которые должны быть скрыты
        for (let i = 0; i < idHiddenBlock.length; i += 1) {
            let domHiddenBlock = document.querySelector(idHiddenBlock[i]);
            blockHiddenContent.appendChild(domHiddenBlock);
        }

        //Проверяю, есть ли кнопка на странице
        
        if (openButton) {
            openButton.addEventListener('click', function () {
                //При клике показываю блок с анимацией
                blockHidden.setAttribute('style', 'opacity: 1; pointer-events: auto; overflow-y: scroll; transform: translateY(0); transition: transform 0.4s ease-in, opacity 0s ease-in;transition-delay: 0.2s, 0s; transition-property: transform, opacity;');
                //Запрещаю перемотку страницы под открытым блоком
                document.body.classList.add('body--hidden');


                let allImage = document.querySelectorAll('.t-feed__post-bgimg.t-bgimg');
                let moreNews = document.querySelector('.js-feed-btn-show-more');
                let openButtonPopup = document.querySelectorAll('.js-feed-post-link');

                function popupOpen() {
                    //Отслеживаю нажатия по постам в потоке
                    openButtonPopup.forEach(el => {
                        el.addEventListener('click', function () {
                            // Блоку запрещаю перемотку
                            blockHidden.style.overflowY = 'hidden';
                            let popupBlock = document.querySelector('.t-popup_show');
                            let closeButtonPopup = document.querySelector('.t-popup__close');
                            let popupBlockMenu = document.querySelector('.t-feed__post-popup__close-wrapper');
                            let popupBlockTop = $('.block--hidden').scrollTop();
                            
                            // Устраняю проблему со скачком окна вверх
                            popupBlock.style.top = popupBlockTop + 'px';
                            popupBlockMenu.style.top = popupBlockTop + 'px';

                            closeButtonPopup.addEventListener('click', function () {
                                //Возвращаю блоку перемотку
                                blockHidden.style.overflowY = 'scroll';
                            })
                        })
                    })
                }

                popupOpen();

                // Устраняю проблему lazyload
                allImage.forEach(img => {
                    img.classList.add('loaded');
                    let imageSrc = img.getAttribute('data-original');
                    img.style.backgroundImage = `url('${imageSrc}')`;
                })

                // При нажатии на кнопку загрузить еще обновляю данные
                moreNews.addEventListener('click', function () {
                    window.setTimeout(function () {
                        openButtonPopup = document.querySelectorAll('.js-feed-post-link');
                        popupOpen();
                    }, 1000);
                })
            })
        }

        //Закрытие окна
        closeButton.addEventListener('click', function () {
            blockHidden.setAttribute('style', 'opacity: 0; pointer-events: none; transform: translateY(100%); transition: transform 0.4s ease-in-out, opacity 0.2s ease-in-out; transition-delay: 0s, 0.3s; transition-property: transform, opacity;');
            document.body.classList.remove('body--hidden');
        })
    })
</script>