Web Component Usage
Modal is a web component. You can simply use <bolt-modal> in the markup to make it render. In the following examples, we use onclick to trigger the modal. However, the same options shown on the Trigger Options page are also available on the web component.
Open Modal
This is a modal.
<bolt-button on-click="show" on-click-target="js-bolt-modal-demo">
Open Modal
</bolt-button>
<bolt-modal class="js-bolt-modal-demo">
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 must be defined.
Open Modal
This is the header
This is the body (default).
This is the footer
<bolt-button on-click="show" on-click-target="js-bolt-modal-basic-demo">
Open Modal
</bolt-button>
<bolt-modal class="js-bolt-modal-basic-demo">
<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 onclick to this.nextElementSibling.show().
When using a close button that's inside a <bolt-modal>, set onclick to this.closest('bolt-modal').hide().
Open Modal
This modal has a close button along with the content.
Close Modal
<bolt-button on-click="show" on-click-target="js-bolt-modal-trigger-demo">
Open Modal
</bolt-button>
<bolt-modal class="js-bolt-modal-trigger-demo">
<bolt-text>This modal has a close button along with the content.</bolt-text>
<bolt-button on-click="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 on the <bolt-modal> element. Use unique combinations to customize a modal to your liking.
<bolt-button on-click="show" on-click-target="js-bolt-modal-advanced-demo">
Open Modal
</bolt-button>
<bolt-modal width="optimal" spacing="none" theme="none" scroll="overall" class="js-bolt-modal-advanced-demo">
<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 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 on-click="show" on-click-target="js-bolt-modal-ssr-demo">
Open Modal
</bolt-button>
<bolt-modal class="js-bolt-modal-ssr-demo">
This is a modal.
</bolt-modal>
{% endfilter %}