docs: function Modal(opts) {
      var that = this;
  
      var body = $.div();
      body.addEventListener("scroll", onScroll.bind(this, body));
      const
          laterScroll = function() {
              window.setTimeout(function() {
                  onScroll(body);
              });
          },
          header = $.tag('header', 'thm-fg', 'thm-ele8', 'thm-bgPD'),
          footer = $.tag('footer', "thm-bg0"),
          cell = $.div('cell', 'thm-ele24', 'thm-bg1', [header, body, footer]),
          elem = $.elem(this, 'div', 'wdg-modal', [$.div([cell])]);
      $.on(elem, function(evt) {
          if (evt.target.parentElement !== elem) return;
          that.visible = false;
      });
  
      DB.prop(this, 'content')(function(v) {
          $.clear(body);
          if (Array.isArray(v)) {
              v.forEach(function(itm) {
                  $.add(body, itm);
              });
          } else if (typeof v !== 'undefined' && v !== null) {
              $.add(body, v);
          }
          laterScroll();
      });
      DB.prop(this, 'header')(function(v) {
          if (!v || (typeof v === 'string' && v.trim().length === 0)) {
              $.addClass(header, "hide");
              return;
          }
          $.removeClass(header, "hide");
          $.clear(header);
          if (Array.isArray(v)) {
              v.forEach(function(itm) {
                  $.add(header, itm);
              });
          } else if (typeof v !== 'undefined' && v !== null) {
              $.add(header, v);
          }
          laterScroll();
      });
      DB.prop(this, 'footer')(function(v) {
          if (!v || (typeof v === 'string' && v.trim().length === 0)) {
              $.addClass(footer, "hide");
              return;
          }
          $.removeClass(footer, "hide");
          $.clear(footer);
          if (Array.isArray(v)) {
              v.forEach(function(itm) {
                  $.add(footer, itm);
              });
          } else {
              $.add(footer, v);
          }
          laterScroll();
      });
      DB.propString(this, 'width')(function(v) {
          $.css(body, {
              'max-width': v
          });
          laterScroll();
      });
      DB.propAddClass(this, 'fullscreen');
      DB.propAddClass(this, 'padding');
      DB.propAddClass(this, 'scroll');
      DB.propAddClass(this, 'wide');
      DB.propBoolean(this, 'visible')(function(v) {
          if (v) {
              that.attach();
          } else {
              that.detach();
          }
      });
  
      opts = DB.extend({
          visible: false,
          header: null,
          content: [],
          footer: null,
          padding: true,
          scroll: true,
          wide: false,
          fullscreen: false,
          width: 'auto'
      }, opts, this);
  }