@precision-nutrition/super-modal

super-modal

A versatile, CSS-only, scrollable modal that shrink wraps its content. You must define your own styles for now.

Requirements

• Tailwind

Elements

• -outer - The outermost container of all modal pieces
• -overlay - The darkened background
• -inner - The centred area that holds the content
• -closeButton - The close button

Attributes

• modifierClassName - (Optional) Class name to add to the modal to differentiate between modals for styling purposes
• outerClassNames - (Optional) Class names to add to the -outer div
• overlayClassNames - (Optional) Class names to add to the -overlay div
• innerClassNames - (Optional) Class names to add to the -inner div
• closeButtonClassNames - (Optional) Class names to add to the close button button
• disableOverlayClose - (Optional) Remove the ability to click on the overlay to close the modal

NOTES:

Because the SuperModal shrink wraps its content (i.e., the -inner div contracts to fit the content inside of it), its behaviour can depend on the type of content that it holds.

If the content has a set width or max-width, no problem, the -inner div will shrink to fit it. But if the content doesn't have a fixed width - like a bunch of 100% wide paragaphs for example - you must supply a max-width for the -inner div so that the modal doesn't fill the full width of the window. You can do this in a few different ways:

• By passing in a max width utility class into the innerClassNames attribute
• Adding a max-width property to a custom SuperModal-inner CSS rule.
• Wrapping the content in a div and adding a max-width to that

Inversely, it can happen that the -inner div shrink wraps the content a little too much and the modal becomes too narrow. If this happens, add a width: 100%; max-width: Xrem (where Xrem is the desired width of the modal) to your -inner custom CSS rule, or pass equivalent utility classes into the innerClassNames attribute.

Example CSS

Copy this CSS to lay the foundation for your modal.

.SuperModal {

  /* Elements */

  &-outer {
    position: fixed;  /* Required */
    top: 0;           /* Required */
    right: 0;         /* Required */
    bottom: 0;        /* Required */
    left: 0;          /* Required */
    z-index: xxxx;    /* Required */

    padding: 1rem !important;
  }

  &-overlay {
    position: fixed; /* Required */
    top: 0;          /* Required */
    right: 0;        /* Required */
    bottom: 0;       /* Required */
    left: 0;         /* Required */
    z-index: xxxx;   /* Required */

    background-color: rgba(0, 15, 27, 0.9);
  }

  &-inner {
    margin: auto;                   /* Required */
    flex-basis: auto !important;    /* Required */
    overflow-y: auto;               /* Required */
    max-height: 100%;               /* Required */
    position: relative;             /* Required */
    z-index: xxxx;                  /* Required */

    background-color: white;
    border-radius: 1rem;
  }

  &-closeButton {
    position: absolute; /* Required */
    top: 0;             /* Required */
    right: 0;           /* Required */
    width: 3rem;        /* Required */
    height: 3rem;       /* Required */

    font-size: 1.2rem;
    font-weight: bold;
  }

  // The following is used to create a fullscreen modal similar to our fitpro photo comparison tool

  &--fullscreen {
    .SuperModal-inner {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: transparent;
      margin-left: 0;
      margin-right: 0;
    }

    .SuperModal-closeButton {
      color: white;
      z-index: xxxx;
      font-size: 2rem;
    }
  }
}