modal.md

description
Responsive generic modal component.

@atomico/modal

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

{% embed url="https://codepen.io/uppercod/pen/poLdyBZ" %}

{% embed url="https://github.com/atomicojs/components/tree/master/src/components/modal" %}

Modules

{% tabs %} {% tab title="Default" %}

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

{% endtab %}

{% tab title="Elements" %}

// Import that does not associate the tagName by default
import { Modal } from "@atomico/modal/elements";

{% endtab %}

{% tab title="React" %}

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

{% endtab %}

{% tab title="Preact" %}

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

{% endtab %}

{% tab title="Html CDN" %}

<script 
    type="module" 
    src="http://esm.sh/@atomico/modal"></script>
    
<atomico-modal></atomico-modal>

{% endtab %} {% endtabs %}

Properties

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.

Examples

React

{% embed url="https://stackblitz.com/edit/atomico-modal-react?file=src/App.tsx" %}