Static modal
Use the data-modal-backdrop="static" data attribute to prevent the modal from closing when clicking outside of it. This can be used with situations where you want to force the user to choose an option such as a cookie notice or when taking a survey.
Pop-up modal
You can use this modal example to show a pop-up decision dialog to your users especially when deleting an item and making sure if the user really wants to do that by double confirming.
Are you sure you want to delete this product?
Form element
Use this modal example with form input element to receive information from your users with the advantage of not having to link to another page but keeping the user on the currently active page. A great example would be a login or a register form.
Modal with CRUD
Use this example of a modal to use within CRUD (Create, Read, Update, Delete) operations to create new items, update existing ones, or delete them with a form inside of the modal.
Modal with radio inputs
This example can be used to show a list of options to your users by using advanced radio inputs with a custom design.
Modal with timeline
Use this example to show a timeline of events to your users with a modal. This can be used to show a changelog of your product or a timeline of events.
Modal with progress bar
This modal can be used to show the progress of a task to your users. It can be used to show the progress of a file upload or a task that is being processed.
Crypto wallet
Use this web3 modal component to show crypto wallet connection options like MetaMask or WalletConnect when building a website based on NFT authentication and collectibles.
Modal Sizes
You can use four different modal sizing options starting from small to extra large, but keep in mind that the width of these modals will remain the same when browsing on smaller devices.
Modal Placement
Use the data-modal-placement data attribute on the modal element to set the position relative to the document body based on the available values from {top|center|bottom}-{left|center|right} (eg. top-left or bottom-right).
