Overlay

Overlays are page elements displayed on top of the main UI. They include windows, message boxes, dropdowns, tooltips, etc. Overlays may be defined in the widget tree context or opened independently. In either case, overlays are appended inside the body element.

Contextual Overlays

Contextual overlays are defined inside the widget tree and controlled using the visible property. A contextual overlay will not be shown unless its parent is visible.

<div>
  <Checkbox value={m.showOverlay}>Show Overlay</Checkbox>
  <Overlay
    visible={m.showOverlay}
    style={{ background: "yellow", padding: "30px" }}
    draggable
  >
    This is a draggable overlay.
  </Overlay>
</div>

interface PageModel {
  showOverlay: boolean;
}

const m = createModel<PageModel>();

import { createModel } from "cx/data";
import { Checkbox, Overlay } from "cx/widgets";

Use the style property to control the position on the page. Use inline to render the overlay inline instead of appending to the body element.

Independent Overlays

Independent overlays are explicitly opened and remain visible until explicitly closed. They start their own application loop and require a store parameter.

<Button
  onClick={(e, { store }) => {
    let overlay = Widget.create(
      <Overlay
        style={{
          left: Math.random() * 50 + 25 + "%",
          top: Math.random() * 50 + 25 + "%",
          padding: "30px",
          border: "2px solid gray",
          background: "#efefef",
          textAlign: "center",
        }}
      >
        This overlay will automatically close after 3s.
      </Overlay>,
    )

    let close = overlay.open(store)
    setTimeout(close, 3000)
  }}
>
  Add Overlay
</Button>

The open method returns a close function that can be called to dismiss the overlay.

Configuration