Cacher is the code snippet organizer for pro developers

<parent>
  
  <section>
    <h3>{ message }</h3>
    <p>please push button.</p>
    <button onclick="{this.modalOpen}">open!!</button>
  </section>
  <child></child>
  
  <script>
    /**
     * onclick: modalOpen button
     * child.tag open (to visible)
     */
    this.modalOpen = () => {
      this.tags['child'].open()
    }
  </script>

</parent>

<child>

  <div class="js-modal-overlay" onclick="{ this.close }">
    <div class="js-modal-content" onclick="{ this.noclose }">
      <p>CONTENTS</p>
      <button onclick="{ this.close }">Close</button>
    </div>
  </div>

  <script>
    // properties
    const self = this
    this.count = 0

    // window resize
    this.resize = () => {
      const body = this.root
      if (!body) { return false }
      const windowWidth = (window.innerWidth || document.documentElement.clientWidth || 0)
      const windowHeight = (window.innerHeight || document.documentElement.clientHeight || 0)
      const top = ((windowHeight - body.offsetHeight) / 2)
      const left = ((windowWidth - body.offsetWidth) / 2)
      body.style.top = top + "px"
      body.style.left = left + "px"
    }
    
    /**
     * modal methods
     */
    this.open = () => {
      this.root.style.display = ""
      this.resize()
    }
    this.close=() => {
      this.root.style.display = "none"
    }
    this.noclose = (e) => {
      e.stopPropagation()
    }

    /**
     * on before-mount, update, mount, unmount
     * size, visible state settings
     */
    this.on('before-mount', () => {
      this.close()
    })
    this.on('mount', () => {
      this.update()
      this.count = 0
      window.addEventListener('resize', this.resize)
    })
    this.on('update', () => {
      this.resize()
    })
    this.on('unmount', () => {
      window.removeEventListener('resize', this.resize)    
    })
  </script>

  <style>
    .js-modal-content{
      position: fixed;
      z-index: 2;
      top: 13%;
      left: 0;
      right: 0;
      width: 80%;
      height: 80%;
      margin: auto;
      padding: 2rem;
      border: 2px solid #aaa;
      background: white;
    }
    .js-modal-overlay {
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      width: 120%;
      height: 120%;
      background-color: rgba(0, 0, 0, 0.75);
    }
  </style>
  
</child>