Use the modal class to create a wrapper for your modal dialogs. Usually you will need to use also the scrim class to block the interaction with the background elements, and the close for displaying a close button in the modal.
<div class="scrim"> <div class="modal"> <div class="is-flex has-items-center"> <h4 class="has-mb-none">Modal</h4> <div class="close has-ml-auto"></div> </div> <div class="has-pt-6"> Content of the modal </div> </div> </div>
The modal element will apply the styles defined in the dialogs.modal field of your theme configuration.
export default { dialogs: { modal: { maxWidth: "500px", }, }, // ...other configuration };
Designed and maintained with by @jmjuanes.
Code is licensed under MIT, documentation under Creative Commons Attribution 4.0.