Modal

Usage

Modals are notoriously difficult to accomplish with pure CSS. There are two ways of adding popup functionality, one through the :target selector, the other the checkbox method.
We have opted to create our modals via the checkbox technique as having empty links on a page can hinder your SEO efforts.
Of course if you prefer to use vanilla JS for modals, there is a simple script you can you use at the bottom of this page.

Notation:

There needs to be an action button & checkbox that links to the modal in order for it to appear.
To achieve this, add a <label> element with a for attribute. Then create a checkbox with the class modal-toggle and set the ID the same as the for attribute of the label.
If you wish to add multiple close buttons, just simply add more labels with the for attribute set equal to the ID of the checkbox.
The modal comprises of a modal-container to wrap the modal content, a modal-header for the title & close button, the modal-body for the main content & the modal-footer for action buttons.
The modal-overlay is entirely optional, if you wish to disable the close functionality, simply change the <label> to a <div>

<label for="exampleModal" class="btn btn-secondary c-white">Centered</label>
<input type="checkbox" class="modal-toggle" id="exampleModal">

<div class="modal" aria-hidden="true">
    <div class="modal-container">
        <div class="modal-header">
            <h3>Modal Title</h3>
            <label class="modal-btn-close" for="exampleModal">
                <i class="fas fa-times"></i>
            </label>
        </div>
        <div class="modal-body">
            <p>An old man walked across the beach...</p>
        </div>
        <div class="modal-footer">
            <button class="btn mr-2 btn-primary">Nice Story!</button>
            <label for="exampleModal" class="btn btn-secondary">Close</label>
        </div>
    </div>
    <label for="exampleModal" class="modal-overlay"></label>
</div>

Centered

To center a modal in the middle of the viewport, just add the modal-centered class to the modal.

<label for="centeredModal" class="btn btn-secondary c-white">Centered</label>
<input type="checkbox" class="modal-toggle" id="centeredModal">

<div class="modal modal-centered" aria-hidden="true">
    <div class="modal-container">
        <div class="modal-header">
            <h3>Modal Title</h3>
            <label class="modal-btn-close" for="centeredModal">
                <i class="fas fa-times"></i>
            </label>
        </div>
        <div class="modal-body">
            <p>An old man walked across the beach...</p>
        </div>
        <div class="modal-footer">
            <button class="btn mr-2 btn-primary">Nice Story!</button>
            <label for="centeredModal" class="btn btn-secondary">Close</label>
        </div>
    </div>
    <label for="centeredModal" class="modal-overlay"></label>
</div>

Small

As a max-width property has been set on the modal, there is no need to add any additional classes. These are great for small alert type modals.

<label for="smallModal" class="btn btn-secondary c-white">Small</label>
<input type="checkbox" class="modal-toggle" id="smallModal">

<div class="modal" aria-hidden="true">
    <div class="modal-container">
        <div class="modal-header">
            <h3>Modal Title</h3>
            <label class="modal-btn-close" for="smallModal">
                <i class="fas fa-times"></i>
            </label>
        </div>
        <div class="modal-body">
            <p>Are you sure you want to do this?</p>
        </div>
        <div class="modal-footer">
            <label for="smallModal" class="btn btn-secondary mr-1">Not really</label>
            <label for="smallModal" class="btn btn-primary">Yes</label>
        </div>
    </div>
    <label for="smallModal" class="modal-overlay"></label>
</div>

Large

To create a large modal, simply add the modal-large to the modal element. This will increase the maximum width to 700 pixels.

<label for="largeModal" class="btn btn-secondary c-white">Large</label>
<input type="checkbox" class="modal-toggle" id="largeModal">

<div class="modal modal-large" aria-hidden="true">
    <div class="modal-container">
        <div class="modal-header">
            <h3>Modal Title</h3>
            <label class="modal-btn-close" for="largeModal">
                <i class="fas fa-times"></i>
            </label>
        </div>
        <div class="modal-body">
            <p>An elderly carpenter was ready to retire...</p>
        </div>
        <div class="modal-footer">
            <button class="btn mr-2 btn-primary">Nice Story!</button>
            <label for="largeModal" class="btn btn-secondary">Close</label>
        </div>
    </div>
    <label for="largeModal" class="modal-overlay"></label>
</div>

Scroll

If you have a large amount of content, the modal will automatically become scroll-able using theoverflow-y: auto; property. Give it a go!

Scrolling Content

In a small village, in the valley, lived a man who was always happy, kind, and well disposed to everyone he met. He always smiled, and had kind and encouraging words to say, whenever it was necessary. Everyone who met him, left feeling better, happier and elated. People knew they could count on him, and regarded him as a great friend.

One of the village dwellers was curious to know what his secret was, and how he could always be so kind and helpful. He wondered, how is it that he held no grudge toward anyone, and always was happy.

Once, upon meeting him in the street he asked him: "Most people are selfish and unsatisfied. They do not smile as often as you do; neither are they as helpful or kind as you are. How do you explain it?"

The man smiled at him and replied, "When you make peace with yourself, you can be in peace with the rest of the world. If you can recognize the spirit in yourself, you can recognize the spirit in everyone, and then you find it natural to be kind and well disposed to all."

"If your thoughts are under your control, you become strong and firm.

The personality is like a robot programmed to do certain tasks. Your habits and thoughts are the tools and programs that control your personality. Become free from being programmed, and then, the inner good and the happiness that reside within you will be revealed."

"But a lot of work is necessary. Good habits have to be developed. The ability to concentrate and to control the thoughts has to be strengthened. The work is difficult and endless. There are many walls that need to be to climbed. It is not an easy task." Lamented the villager.

"Do not think about the difficulties, otherwise this is what you will see and experience. Just quieten your feelings and thoughts, and try to stay in this peace. Just try to be calm, and do not let yourself be carried away by your thoughts."

"Is that all?" Asked the villager.

"Try to watch your thoughts and see how they come and go. Stay in the quietness that arises. The moments of peace will be brief at first, but in time they will get longer. This peace is also strength, power, kindness, and love. In time, you will realize that you are one with the Universal Power, and this will lead you to act from a different dimension - point of view -consciousness, not from the selfish, small, limited ego."

"I will try to remember your words," said the villager, and continued, "there is another thing that I am curious about. You do not seem to be influenced by the environment. You have a kind word for everyone, and you are helpful. People treat you well, and never exploit your goodness."

"Being good and being kind do not necessarily point to weakness. When you are good, you can also be strong. People sense your inner strength, and therefore, do not impose on you. When you are strong and calm inside, you help people, because you can, and you want to. You act from strength, not from weakness. Goodness is not a sign of weakness, as some people erroneously think. It can manifest together with power and strength."

"Thank you very much for your advice and explanations", said the villager, and went away happy and satisfied.

<label for="scrollingModal" class="btn btn-secondary c-white">Scrolling Content</label>
<input type="checkbox" class="modal-toggle" id="scrollingModal">

<div class="modal" aria-hidden="true">
    <div class="modal-container">
        <div class="modal-header">
            <h3>Modal Title</h3>
            <label class="modal-btn-close" for="scrollingModal">
                <i class="fas fa-times"></i>
            </label>
        </div>
        <div class="modal-body">
            <p>In a small village, in the valley, lived a man who was always happy..</p> 
        </div>
        <div class="modal-footer">
            <button class="btn mr-2 btn-primary">Nice Story!</button>
            <label for="scrollingModal" class="btn btn-secondary">Close</label>
        </div>
    </div>
    <label for="scrollingModal" class="modal-overlay"></label>
</div>

Javascript

If you wish to use Javascript instead of the checkbox technique, follow the notation below and be sure to use our demo JS code at the very bottom.

Notation:

All that's required for the modal to work with JS is a button with the attribute data-modal set to the ID of the modal itself.
Be sure to add the hash tag to the data attribute.
The modal-hide class will dismiss the modal.

<button data-modal="#meshjsmodal" class="btn btn-secondary nohover c-white">Javascript</button>
<div class="modal" id="meshjsmodal" aria-hidden="true">
    <div class="modal-container">
        <div class="modal-header">
            <h3>Modal Title</h3>
            <div class="modal-btn-close modal-hide">
                <i class="fas fa-times"></i>
            </div>
        </div>
        <div class="modal-body">
            <p>An old man walked across the beach...</p>
        </div>
        <div class="modal-footer">
            <button class="btn mr-2 btn-primary">Nice Story!</button>
            <button class="btn btn-secondary modal-hide">Close</label>
        </div>
    </div>
    <div class="modal-overlay modal-hide"></div>
</div>

Code:

Here, we loop through the buttons and add an eventListener for clicks. When clicked, the modal-open class is added to the modal, trigging the animation. We then loop through the modal-hide classes and remove the class mentioned above on click.

document.addEventListener('DOMContentLoaded', function() {
(document.querySelectorAll('[data-modal]') || []).forEach(function(button) {
let modal = document.querySelector(button.getAttribute('data-modal'));
button.addEventListener('click', function() {
modal.classList.add('modal-open');
});
(document.querySelectorAll('.modal-hide') || []).forEach(function(el) {
el.addEventListener('click', function() {
el.closest('.modal').classList.remove('modal-open');
});
});
});
});

Open/Close function:

It's handy having open and close functions to call with JS, so here's an example fragment for you to take away.

//Open modal function
const closeModal = id => document.querySelector(id).classList.remove('modal-open');
//Close modal function
const openModal = id => document.querySelector(id).classList.add('modal-open');

Variables

Add a description here:

Variable	Value	Description
`$modal-enable-css: true;`	Boolean	Enables/disables the css close functionality of the modal.
`$modal-enable-js: true;`	Boolean	Enables/disables the css JS functionality of the modal.
`$modal-container-box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);`	Color	The box shadow around the modal container.
`$modal-container-border-radius: 6px;`	Pixel/em/rem	Borer radius of the modal container.
`$modal-container-small-width: 500px;`	Pixel/em/rem	Default modal width in pixels, em's or rem's.
`$modal-container-large-width: 700px;`	Pixel/em/rem	Default large modal width in pixels, em's or rem's.
`$modal-container-transform: -50px;`	Pixel/em/rem	How much the modal container should animate down (or up) from, in pixels, em's or rem's.
`$modal-close-button-color: rgba(0, 0, 0, 0.4);`	Color	The color of the cross that appears in the top right hand side of the modal.
`$modal-mobile-padding: 25px 15px;`	Pixel/em/rem	Padding amount on mobile devices for the modal container in pixels, em's or rem's.
`$modal-default-padding: 75px 0;`	Pixel/em/rem	Padding amount on large devices (tablet and upwards) for the modal container in pixels, em's or rem's.
`$modal-header-padding: 24px 24px 0;`	Pixel/em/rem	Padding amount for the header section of the modal (top) in pixels, em's or rem's.
`$modal-body-padding: 24px 24px 16px;`	Pixel/em/rem	Padding amount for the body section of the modal (middle) in pixels, em's or rem's.
`$modal-footer-padding: 0 24px 24px;`	Pixel/em/rem	Padding amount for the footer section of the modal (bottom) in pixels, em's or rem's.
`$modal-overlay-background-color: rgba(0, 0, 0, 0.4);`	Color	Default color of the modal overlay (full width, full height).
`$modal-container-transition: 0.4s;`	Seconds \| milliseconds	The amount in seconds/milliseconds it takes for the modal container to appear.
`$modal-overlay-transition: 0.6s;`	Seconds \| milliseconds	The amount in seconds/milliseconds it takes for the modal overlay to appear.