✨ Welcome Summer Sale! Get all templates for $79 (40% Off) ✨
Cruip CSS

Modal

Effective on March 1st, 2023, Cruip CSS templates are no longer distributed, maintained or supported.

Let’s have a look at how the modals have been structured πŸ‘‡

Modal component

<!-- 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 the aria-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>
If you are having a hard time using modals in React or Vue, you might want to check out the ready-made demos you’ve downloaded.

Video modal

Video modal component

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) or video-tag (Vue) prop should be set to video

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

PropTypeDefaultAccepted values
showbooleanfalse
handleClosefunction
closeHiddenbooleanfalse
videostringPath to video or Vimeo / YouTube video URL
videoTagstringvideo for self-embedded videos or iframe for Vimeo / YouTube

Vue props

PropTypeDefaultAccepted values
showbooleanfalse
close-hiddenbooleanfalse
videostringPath to video or Vimeo / YouTube video URL
video-tagstringvideo 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

Learn more about the Sass logic behind each template.
Last updated on August 17, 2021