Web Component Usage Bolt Modal is a web component, you can simply use <bolt-modal> in the markup to make it render. For the trigger, you must use onclick to activate the modal.
Open Modal This is a modal.
<bolt-button onclick="this.nextElementSibling.show()"> Open Modal </bolt-button> <bolt-modal> This is a modal. </bolt-modal>
Basic Usage The modal container has 3 sections (slots) for passing content, header, default, footer. To pass content to either the header or footer, slot prop must be defined.
Open Modal This is the header This is the body (default). This is the footer
<bolt-button onclick="this.nextElementSibling.show()"> Open Modal </bolt-button> <bolt-modal> <bolt-text slot="header">This is the header</bolt-text> <bolt-text>This is the body (default).</bolt-text> <bolt-text slot="footer">This is the footer</bolt-text> </bolt-modal>
Trigger Usage When using an open button that comes right before a <bolt-modal>, set the onclick to: this.nextElementSibling.show() When using a close button that's inside a <bolt-modal>, set the onclick to: this.closest('bolt-modal').hide()
Open Modal This modal has a close button along with the content. Close Modal
<bolt-button onclick="this.nextElementSibling.show()"> Open Modal </bolt-button> <bolt-modal> <bolt-text>This modal has a close button along with the content.</bolt-text> <bolt-button onclick="this.closest('bolt-modal').hide()">Close Modal</bolt-button> </bolt-modal>
Advanced Usage The web component has all the options shown in the schema table. You can define each prop within the <bolt-modal> element. Use unique combinations to customize a modal to your liking.
Open Modal
<bolt-button onclick="this.nextElementSibling.show()"> Open Modal </bolt-button> <bolt-modal width="optimal" spacing="none" theme="none" scroll="overall"> <bolt-image src="/images/content/backgrounds/background-robotics-customer-service.jpg" alt="This is an image"></bolt-image> </bolt-modal>
Server-side Rendered Web Components (Experimental) The <bolt-modal> component, among many other web components in Bolt, will support server-side rendering via the new upcoming {% filter bolt_ssr %} custom Twig filter. Check out the docs on server-side rendering for information!
Open Modal This is a modal.
{% filter bolt_ssr %} <bolt-button onclick="this.nextElementSibling.show()"> Open Modal </bolt-button> <bolt-modal> This is a modal. </bolt-modal> {% endfilter %}