--- title: "JavaScript Modal" description: "jSuites Modal is a lightweight JavaScript plugin and web component designed for building responsive and highly customizable popup modals, enhancing the user experience in web applications." source: https://jsuites.net/docs/modal --- jSuites provides a lightweight native JavaScript plugin for creating responsive and versatile modals. It works seamlessly with your favourite frameworks like React, Angular, Vue, web components, or even pure JavaScript. ## Documentation ### Available Methods | Method | Description | |-----------|-----------------| | `open()` | Open the modal | | `close()` | Close the modal | ### Initialization properties | Property | Description | |---------------------|--------------------------------------| | `url: string` | Open the content from a remote URL. | | `closed: boolean` | Create the modal but keep it closed. | | `width: number` | The width size of your modal | | `height: number` | The height size of your modal | | `title: string` | The title shown of your modal | | `backdrop: boolean` | Don't show the backdrop | ### Events | Event | Description | |-----------|----------------------------------------------------------------------------------------------------| | `onopen` | A method is execute when the modal is opened.
(element: HTMLElement, instance: JSON) => void | | `onclose` | A method is execute when the modal is closed.
(element: HTMLElement, instance: JSON) => void | ## Examples ### JavaScript Web Component Modal This example shows how to create and use a modal with the custom HTML tag provided by the `jSuites.modal` plugin, enabling seamless integration as a web component. {.all} ```html This is an example how to create a modal based on the custom HTML javascript modal. ``` ### JavaScript Modal This example demonstrates a basic modal implementation with event handling. ```html
Modal with no title content
``` ```jsx import { Modal } from 'jsuites/react' import { useRef } from 'react' import 'jsuites/dist/jsuites.css' export default function App() { const modal = useRef(null); const onOpen = function(el, instance) { console.log('Modal is open'); } const onClose = function(el, instance) { console.log('Modal is closed'); } const handleOpen = function() { modal.current.open(); } return (
This is an example how to create a modal based on the custom HTML javascript modal.
); } ``` ```vue ``` ### Create Modal from HTML Content This example demonstrates how to use `jSuites.modal` to initialize a modal directly from an existing DOM element. The modal is created without specifying a title, showcasing a simple and flexible approach to working with predefined HTML content. ```html ``` ```jsx import { Modal } from 'jsuites/react' import { useRef } from 'react' import 'jsuites/dist/jsuites.css' function App() { const modal = useRef(null); const handleOpen = function() { modal.current.open() } return (
Modal with no title content
); } export default App; ``` ```vue ``` ## More Examples - [Modal Events](/docs/modal/events) - [External Content](/docs/modal/external-content) ## Related Tools - [LemonadeJS Modal](https://lemonadejs.com/docs/plugins/modal/) - Reactive modal component with framework integration