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

зависимые клики, Custom Elements
Андрей812,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .helptip {
     height: 35px;
     background-color: hsl(328, 100%, 54%);
     width: 200px;
     display: block;
     margin: 4px;
    }

  </style>

  <script>
   const cssText = `<style type="text/css">
                           .help_content {
                           text-align: center;
                           line-height: 35px;
                           position: relative;
                           }
                           .jclose:after{font-size: 32px;
                           padding: 4px;
                           line-height: 8px;
                           height: 8px;
                           right: 2px;
                           top: -16px;
                           position:  absolute;
                           content: "\u0353";
                           color:  hsl(0, 0%, 100%); }
                   </style>`,
          htmlText =  `<div class="help_content">Текст<div class="jclose"></div></div>`;
   class Attention extends HTMLDivElement {
     constructor(html, cls) {
       super();
       this.parentClass = cls;
       this.attachShadow({mode: 'open'});
       this.shadowRoot.innerHTML = html;
       document.addEventListener("click", this.eventHandler.bind(this));
     }
     eventHandler({target}) {
       if(target = target.closest(this.parentClass)) {
         target === this.parentNode ? this.remove() : target.append(this);
       }
     }
   }
   window.customElements.define('help-element', Attention,{extends: 'div'});
   new Attention(cssText + htmlText, `.helptip`);
  </script>
</head>

<body>
<span class="helptip"></span>
<span class="helptip"></span>
</body>
</html>

Последний раз редактировалось рони, 28.06.2019 в 23:31.
Ответить с цитированием