Modal

Customizable popup modal component

Use modal when you need to prompt for more actions from user, fill an additional form or similar.

By default, modal will be shown centered horizontally and vertically on desktop devices, and on bottom for mobile devices, to provide the better user experience as it will be closer to thumb, really.

Also, by default, modal will emit close event on Escape key.

When modal is opened, it will prevent scrolling of the page behind it.

Basic modal example

Using slots in modal

Events reference

<bdn-modal> emits several events that you can use when necessary. You can see the list below:

Event name	Description
modal-close	Triggered when user click the close button, backdrop or when visible prop has been changed to false
modal-closed	Triggered when modal closing has been completed and transitions is done
modal-opened	Triggered when modal openening transition is done

Props reference

Property	Type	Default	Accepts	Description
visible	Boolean	false	true or false	Denotes if modal is opened or closed
title	String	empty	Any string	A title for modal
icon	String	empty	Any string	A string that will be inserted in class for <i></i> element, usually you have this as an icon class, for example icon-person and such
size	String	md	sm, md, lg, full	The width of the modal. full covers the screen.
prevent-backdrop-close	Boolean	false	true or false	Determines if modal should emit close event when clicking on backdrop.
hide-close-button	Boolean	false	true or false	Determines if close button in the top right corner of modal should be hidden

Slots reference

Slot	Description
default	The main content in the center of the modal
header	Use this slot to add customizable content in header of the modal. If you use this slot, you cannot use the icon and title props, as slot will override them.
footer	Use this slot to add customizable content in bottom section of the modal, for example close button and similar.