09 Modals - pimmey/noo-docs GitHub Wiki

This theme includes a lot of modals for secondary content, like project case study or blog post.

While occupying quite a lot of rows of code, the overall structure is rather simple. There are two parts of modal.

This will be an <a> element, which will act like a layout block. One thing you should notice though, is that it requires modal-trigger class and its href should point to the id of corresponding modal.

Let's take the first project as an example:

<a href="#vase" class="modal-trigger">
  <img src="./assets/images/work/vase.png" class="responsive-img">
</a>

The modal itself consists of several elements. First of all, it requires the id, which is being used in your trigger's href, as well as modal and bottom-sheet classes.

Besides that, the inner structure must include the following elements:

• A close button with particular classes – modal-close and absolute:

<div class="modal-close absolute">&times;</div>

You can also add class white-text to make it light, in case you have a dark background.

• Modal content, the part where you actually include everything else. It can be anything really. Use block layouts, include texts, quotes, images, videos, etc. Don't forget to include Materialize's grid divs, like <div class="row"> and <div class="col s12 m8 l6"> to ensure proper spacing and alignments.

You can include a carousel in your modals, with the following structure:

<div class="slider">
    <ul class="slides">
        <li>
            <img src="./assets/images/blog/mountain.jpg" alt="Mountain">
        </li>
        ...
    </ul>
</div>