Показать сообщение отдельно
  #6 (permalink)  
Старый 23.07.2021, 16:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Андрей812,
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <style>
        .help_content {
            position: relative;
            background: green;
            color: #fff;
        }

        .close {
            position: absolute;
            right: 22px;
            top: 2px;
            width: 12px;
            height: 32px;
            opacity: 0.3;
        }

        .close:hover {
            opacity: 1;
        }

        .close:before,
        .close:after {
            position: absolute;
            left: 15px;
            content: ' ';
            height: 33px;
            width: 2px;
            background-color: #333;
        }

        .close:before {
            transform: rotate(45deg);
        }

        .close:after {
            transform: rotate(-45deg);
        }
    </style>
    <script>
    </script>
</head>

<body>

    <div class="helptip-mod">БЛОК</div>
    <br />
    <div class="helptip-mod">БЛОК2</div>
    <br />
    <div class="helptip-mod">БЛОК3</div>
    <br />

    <script>
        document.addEventListener("click", ({ target }) => {
            let content = document.querySelector(".help_content"), mod;
            if (mod = target.closest(".helptip-mod")) {
                if (!mod.querySelector(".help_content")) {
                    if (content) content.remove();
                    let tt = '<ul><li>номер 1</li><li>номер 2</li><li>номер 3</li><li>номер 4</li></ul>';
                    mod.insertAdjacentHTML("beforeEnd", '<div class="help_content">' + tt + '<div class="close"></div></div>');
                }
                else if (target.closest(".close") || !target.closest(".help_content")) content.remove();
            } else if (content) content.remove();
        });
    </script>


</body>

</html>
Ответить с цитированием