DanilaKud
@DanilaKud
Занимаюсь фронтенд-разработкой

Как сверстать интерактивное окно при клике на текст?

5e4e92445d486464657948.jpeg

При клике должно отображаться окно, причём от каждой ссылки должно быть разное содержимое. Так ещё и это окно нужно закрывать с помощью кнопки. Получается к каждой ссылке нужно делать отдельный всплывающий блок? Я умею верстать меню и примерно понимаю, как всё сделать. Но тут их 5, ещё и разной содержимое.

Вот вёрстка на всякий случай: https://kudashovdanila.github.io/belaz-parts
  • Вопрос задан
  • 279 просмотров
Решения вопроса 1
@Groshik_BY
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pop-item {
            padding: 5px;
            background: #ff4413;
            color: white;
            z-index: 1;
            margin: 10px;
        }
        .pop-block {
            z-index: 2;
            background: #35415d;
            color: white;
            position: absolute;
            top: 100%;
            left: 0;
            padding: 10px;
        }
        .pop-block-close-panel {
            text-align: right;
        }
        .pop-block-close {
            font-size: 10px;
            padding: 5px;
            color: red;
        }
        .pop-text-block {
            padding: 5px;
        }
    </style>
</head>
<body>
    <div data-text="Pop 1" class="pop-item">POPBLOCK 1</div>
    <div data-text="Pop 2" class="pop-item">POPBLOCK 2</div>
    <div data-text="Pop 3" class="pop-item">POPBLOCK 3</div>
    <script>
        class Pop {
            event = 'click';
            closeEvent = null;
            class = '';
            parent = null;
            closeButtonStyle = closeButton => {};
            getText = item => { return ''};
            open = item => {};
            close = item => {};

            constructor() {
            }

            generate() {
                let list = document.getElementsByClassName(this.class);
                Array.prototype.forEach.call(list, pop => {
                    let popBlock = document.createElement('div');
                    let popBlockClosePanel = document.createElement('div');
                    let popBlockClose = document.createElement('div');
                    let popTextBlock = document.createElement('div');
                    this.closeButtonStyle(popBlockClose);
                    popBlock.classList.add('pop-block');
                    popBlockClosePanel.classList.add('pop-block-close-panel');
                    popBlockClose.classList.add('pop-block-close');
                    popTextBlock.classList.add('pop-text-block');
                    popTextBlock.innerText = this.getText(pop);
                    pop.addEventListener(this.event, e => {
                        if (e.target === pop)
                            this.open(popBlock);
                    });
                    if (this.closeEvent !== null) {
                        pop.addEventListener(this.closeEvent, e => {
                            this.close(popBlock);
                        })
                    }
                    popBlockClose.onclick = e => {
                        this.close(popBlock);
                    };
                    popBlockClosePanel.appendChild(popBlockClose);
                    this.close(popBlock);
                    popBlock.appendChild(popBlockClosePanel);
                    popBlock.appendChild(popTextBlock);
                    if (this.parent === null) {
                        pop.appendChild(popBlock);
                    }
                    else {
                        this.parent.appendChild(popBlock);
                    }
                });
            }
        }
        document.addEventListener('DOMContentLoaded', () => {
            let popMenu = new Pop();
            popMenu.class = 'pop-item';
            popMenu.event = 'click';
            popMenu.closeEvent = 'mouseleave';
            popMenu.open = item => {
                item.style.display = 'block';
                let parent = item.parentElement;
                item.style.top = parent.offsetTop + parent.offsetHeight + 'px';
                item.style.left = parent.offsetLeft + 'px';
            };
            popMenu.close = item => {
                item.style.display = 'none';
            };
            popMenu.closeButtonStyle = closeButton => {
                closeButton.innerHTML = 'X';
            };
            popMenu.getText = item => {
                return item.dataset.text;
            };
            popMenu.generate();
        });
    </script>
</body>
</html>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы