Responsive generic modal component.

Webcomponent built with Atomico JS, Simple to use and customize modal. Includes additional support for React and Preact.


import {
  Modal // HTMLElement
} from "@atomico/modal";


showAfterMs / show-after-ms: String, defines the milliseconds to wait for the activation of the modal.

show: Boolean, defines whether or not to show the modal.

padding: String responsivo, define a padding for the content of the modal, example:

  1. padding="1rem"

  2. padding="1rem, 2rem 720px, 3rem 1080px"

position: String responsivo, defines the position of the content within the modal, example:

  1. position="center"

  2. position="center top"

  3. position="center bottom"

  4. position="left center"

  5. position="right center"

  6. position="center, right bottom 1080px"

fullSize / full-size: Boolean, It enables the use of background in the modal, this is complemented by the background slot to attach personalized content in the background.

fullSizeClosed / full-size-closed: Boolean, defines whether clicking on the background hides the modal.



Last updated