{% include '@bolt-elements-button/button.twig' with {
content: 'Open Modal',
attributes: {
type: 'button',
'data-bolt-modal-target': '.js-target-name',
}
} only %}
{% include '@bolt-components-modal/modal.twig' with {
content: 'This is a modal',
attributes: {
class: 'js-target-name'
},
} only %}
Prop Name | Description | Type | Default Value | Option(s) |
---|---|---|---|---|
attributes
|
A Drupal attributes object. Used to apply additional HTML attributes to the outer <bolt-modal> tag. |
object
| — |
|
width
|
Controls the width of the modal container. |
string
|
optimal
|
|
spacing
|
Controls the spacing around the modal container. |
string
|
medium
|
|
persistent
|
Enables the modal to be persistent. This will eliminate ways to close the modal and it is up to the author to provide a custom link to close the modal or redirect to another page within the modal content. Must be used in tandem with the |
boolean
|
false
|
|
persistent_return_url
|
The URL to be used on a return link. If a modal is persistent, a return link is required to provide the user a way out. Must be used in tandem with the |
string
| — |
|
theme
|
Controls the color theme of the modal container. Note: the values xlight, light, dark, xdark, xxdark are deprecated. |
string
|
white
|
|
scroll
|
Controls the scrolling area. |
string
|
container
|
|
uuid
|
Unique ID for modal, randomly generated if not provided. |
string
| — |
|
npm install @bolt/components-modal