Modal

BsModal is a popup dialog component that brings information to the user. It also provides actions through the action buttons to prompt the user for input or to ask for a decision. The component can also contain more complex UI elements that require the focus of the user.

Overview

BsModal uses <bs-overlay> component internally and can be closed using the ESC key (enabled by default), or clicking the backdrop (enabled by default). BsModal doesn't have any button, to achieve this you can add the appropriate action buttons on the footer slot.

When a dialog contains complex UI or you want to have appropriate dialog size, it is good to define the width property and max-width property to a desire value.

Hiding The Overlay

Overlay or backdrop is enabled by default. To hide the overlay, sets overlay property to false.

True Modal Dialog

You can show a modal dialog by setting the overlay-click-close property to false.

Scrolling Long Content

When dialog content become too long, you can make the dialog content scrollable.

CSS Variables

As CSS technology evolves, Vue MDBootstrap introduces local CSS variables on .md-modal for better customization.

Updated in v2.2.0

.md-modal {
  --md-modal-background: var(--background-tertiary);
  --md-modal-color: var(--foreground-tertiary);
  --md-modal-border-radius: 1rem;
  --md-modal-header-padding: #{vars.$padding-lg vars.$padding-lg 1.25rem};
  --md-modal-body-padding: #{vars.$padding-lg vars.$padding-lg 1.25rem};
  --md-modal-footer-padding: #{vars.$padding-sm vars.$padding-md vars.$padding-md vars.$padding-md};
  --md-modal-footer-spacing: 0.375rem;
  --md-modal-max-width: 80%;
  --md-modal-title-font-size: 1.375rem;
  --md-modal-title-font-weight: var(--font-weight-medium);
  --md-modal-box-shadow: 0 5px 5px -3px oklch(0 0 0 / 0.2), 0 8px 10px 1px oklch(0 0 0 / 0.14), 0 3px 14px 2px oklch(0 0 0 / 0.12);
}

API Reference

Property	Type	Default	Description
body-class	String|String[]		Additional CSS class name for dialog body container.
esc-close	Boolean	true	Close the modal dialog when ESC key is pressed.
footer-class	String|String[]		Additional CSS class name for dialog footer container.
full-page	Boolean	false	Show modal dialog in full page mode.
header-class	String|String[]		Additional CSS class name for dialog header container.
max-width	Number		Modal dialog maximum width.
open v-model	Boolean	false	Component state, show or hide modal dialog.
overlay	Boolean	true	Show backdrop overlay or not.
overlay-click-close	Boolean	true	Enable or disable closing the modal dialog when the backdrop is clicked. v2.0.0
overlay-color	String	'#000'	The backdrop overlay color.
overlay-opacity	Number	0.4	The backdrop overlay opacity.
scrollable	Boolean	false	Enable or disable scrollable body capability.
title	String		Modal dialog title.
transition	String	'scale'	Transition animation name when showing the dialog. Valid values are: scale, slide-top, slide-bottom, slide-left, slide-right, fade.
width	Number		Modal dialog width.

Name	Arguments	Description
close		Fired when the modal dialog is closed.
update:open	(state:Boolean)	Used to update the open property.

Name	Description
default	The outlet slot used to place the main content.
header	The outlet slot used to place the custom header content.
footer	The outlet slot used to place the footer content.