A modal window, also known as a dialog, is a pop-up window that appears on top of the main content of a website or application. It typically requires user interaction before the user can return to the main content. Modalbwindows are commonly used for displaying important messages, alerts, or interactive forms.
Demo
Subscribe to our Newsletter
Join thousands getting emails in their inbox.
Code
Documentation
Installation
Follow these steps to install and use the ip-modal component in your project.
Step 1
Install the ip-modal component as a dependency in your project:
npm install ip-accordion
Step 2
Import the module into your script file:
Usage
To use this component, add the properties as attributes.
Properties
Property
Attribute
Necessity
Description
string
Default
buttonText
button-text
Required
The text to display on the trigger button
string
Open modal
closeAriaLabel
close-aria-label
Required
The aria-label text for the close button
string
Close the dialog
Content
The content of the modal should be inserted with the slot="content" attribute.
Example
Customization
Style
We have a set of predefined CSS variables used to customize the modal:
--svg-color
--svg-size
Class
We have a set of classes that can be used for further customization:
