status/res/imp/status-popup.html

<script>
  window.SkiaBehaviors = window.SkiaBehaviors || {};
  SkiaBehaviors.StatusPopup = {
    show: function(){
      // If we are on a small screen (e.g. mobile), make the popup
      // take up more space than on a desktop.
      if (document.documentElement.clientWidth < 600) {
        this.style["height"] = "70vh";
        this.style["width"] = "70vw";
        this.style["top"] = "15vh";
        this.style["left"] = "15vw";
      }
      var popup = this;
      // Stop propegation of any taps on the popup, so they don't make
      // it go away
      popup.addEventListener("tap", function(e){
        e.stopPropagation();
      });
      // If the user taps anywhere else, remove the popup.
      var hide = function(e){
        popup.style["display"] = "none";
        document.body.removeEventListener("tap", hide);
      };
      document.body.addEventListener("tap", hide);
    },
  };
</script>

<dom-module id="status-popup">
  <template>
  <style>
    :host {
      position: fixed;
      box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
                  0  6px 30px 5px rgba(0, 0, 0, 0.12),
                  0  8px 10px -5px rgba(0, 0, 0, 0.4);
      padding: 15px;
      border-radius: 10px;
      background-color: white;
      /* Default to desktop size of 40% of viewport */
      top: 30vh;
      left: 30vw;
      height: 40vh;
      width: 40vw;
      overflow: auto;
      z-index: 5;
    }
  </style>
  </template>
</dom-module>