Let’s have a look at how the modals have been structured π
<!-- A triggering element -->
<button class="button button-primary modal-trigger" aria-controls="standard-modal">Standard modal</button>
<!-- The modal -->
<div id="standard-modal" class="modal">
<div class="modal-inner">
<button class="modal-close modal-close-trigger" aria-label="close"></button>
<div class="modal-content">
<h2 class="mt-0">Title</h2>
<p class="m-0">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
</div>
</div>
</div>
The triggering element (it can be an anchor link, an image, or whatever you prefer) needs two information:
- A
.modal-trigger
class - An
aria-controls
attribute, whose value must match the modal id
The modal needs:
- An
id
matching thearia-controls
attribute of the triggering element - A structure as shown in the example above, i.e.:
.modal
βββ .modal-inner
βββ .modal-close.modal-close-trigger (optional)
βββ .modal-content
In React and Vue, you need to set a state for the modal and handle opening and closing methods, for example π
// Ensure to import the required components ...
class App extends React.Component {
state = {
showModal: false
}
openModal = (e) => {
e.preventDefault();
this.setState({ showModal: true });
}
closeModal = (e) => {
e.preventDefault();
this.setState({ showModal: false });
}
render() {
return (
<Button color="primary" onClick={this.openModal}>Standard modal</Button>
<Modal
show={this.state.showModal}
handleClose={this.closeModal}
>
<h2 class="mt-0">Title</h2>
<p class="m-0">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
</Modal>
);
}
}
// ... ensure to export the default class
<template>
<c-button color="primary" @click="showModal = true">Open modal</c-button>
<c-modal :active.sync="showModal">
<h2 class="mt-0">Title</h2>
<p class="m-0">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
</c-modal>
</template>
<script>
// Ensure to import the required components ...
export default {
// ... more required stuff
data() {
return {
showModal: false
}
}
}
</script>
Video modal
You want to display a video inside a modal, you can follow the example below π
<!-- A triggering element -->
<button class="button button-primary modal-trigger" aria-controls="video-modal" data-video="https://player.vimeo.com/video/174002812">Video modal</button>
<!-- The modal -->
<div id="video-modal" class="modal modal-video">
<div class="modal-inner">
<div class="responsive-video">
<iframe src="#" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</div>
</div>
In the example above, we’ve embedded a video from Vimeo, but you can also use a video from Youtube, or even a self-embedded video like below π
<!-- A triggering element -->
<button class="button button-primary modal-trigger" aria-controls="video-modal" data-video="path/to/your/video.mp4">Video modal</button>
<!-- The modal -->
<div id="video-modal" class="modal modal-video">
<div class="modal-inner">
<div class="responsive-video">
<video controls src="#"></video>
</div>
</div>
</div>
And here are React / Vue examples:
// Ensure to import the required components ...
class App extends React.Component {
state = {
showModal: false
}
openModal = (e) => {
e.preventDefault();
this.setState({ showModal: true });
}
closeModal = (e) => {
e.preventDefault();
this.setState({ showModal: false });
}
render() {
return (
<Button color="primary" onClick={this.openModal}>Standard modal</Button>
<Modal
show={this.state.showModal}
handleClose={this.closeModal}
closeHidden
video="https://player.vimeo.com/video/174002812"
videoTag="iframe" />
);
}
}
// ... ensure to export the default class
<template>
<c-button color="primary" @click="showModal = true">Open modal</c-button>
<c-modal
:active.sync="showModal"
video="https://player.vimeo.com/video/174002812"
video-tag="iframe" />
</template>
<script>
// Ensure to import the required components ...
export default {
// ... more required stuff
data() {
return {
showModal: false
}
}
}
</script>
For displaying a self-embedded video:
- the
video
prop should contain the path to your video - the
videoTag
(React) orvideo-tag
(Vue) prop should be set tovideo
Close button
The close “X” button is optional. You can omit that in the HTML template.
For React and Vue, you need to set the boolean prop closeHidden
(React) or close-hidden
(Vue) to get rid of it (see the Video modal example above).
You can still close the modal clicking outside the modal or by pressing the ESC
key.
TL;DR
React props
Prop | Type | Default | Accepted values |
---|---|---|---|
show | boolean | false | – |
handleClose | function | – | – |
closeHidden | boolean | false | – |
video | string | – | Path to video or Vimeo / YouTube video URL |
videoTag | string | – | video for self-embedded videos or iframe for Vimeo / YouTube |
Vue props
Prop | Type | Default | Accepted values |
---|---|---|---|
show | boolean | false | – |
close-hidden | boolean | false | – |
video | string | – | Path to video or Vimeo / YouTube video URL |
video-tag | string | – | video for self-embedded videos or iframe for Vimeo / YouTube |
Theming
Style is defined into 3 files:
π Core file
src/assets/scss/core/elements/_modal.scss
ππ«Β Don’t edit this file!
π Settings file
src/assets/scss/settings/elements/_modal.scss
π Use this to adjust Sass variables
π Theme file
src/assets/scss/theme/elements/_modal.scss
π Use this to add custom CSS