@atomico/modal
Responsive generic modal component.
Webcomponent built with Atomico JS, Simple to use and customize modal. Includes additional support for React and Preact.
Default
Elements
React
Preact
Html CDN
import {
Modal // HTMLElement
} from "@atomico/modal";
// Import that does not associate the tagName by default
import { Modal } from "@atomico/modal/elements";
import {
Modal
} from "@atomico/modal/react";
import {
Modal
} from "@atomico/modal/preact";
<script
type="module"
src="http://esm.sh/@atomico/modal"></script>
<atomico-modal></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.
React
Last modified 7mo ago