Modal

roolith css provide you simple modal with normal, small, large and fluid layout. It uses css-grid by default. But you may change it via SCSS to traditional or flex implementation.

Here is a demo how it will look like after modal window shown!

You need to use JavaScript to implement modal window show and hide. Here is a simple implementation via jQuery

Open example modal

// Button
<button class="button button-dark js-open-modal" data-modal="#example-modal">Open example modal</button>

// Modal
<div class="modal" id="example-modal">
    <div class="modal-content">
        <div class="modal-header">Modal header <button class="modal-close">✖</button></div>
        <div class="modal-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit delectus quae autem ducimus neque. Pariatur numquam iure aspernatur aliquid sit. Eos eveniet delectus dicta consectetur quaerat molestiae maiores, neque culpa.</p>
        </div>
        <div class="modal-footer">
            <button class="button js-modal-close">Okay</button>
            <button class="button button-primary float-right js-modal-close">Close</button>
        </div>
    </div>
</div>

Here is simple jQuery implementation which i used to get it worked.

// Open modal once button is clicked
$(document).on('click', '.js-open-modal', function () {
    const modal = $(this).data('modal'); // same as $(this).attr('data-modal')
    $(modal).addClass('active');
});

// Closing modal window after clicking close button
$(document).on('click', '.js-modal-close, .modal-close', function () {
    $(this).closest('.modal').removeClass('active');
});

// Closing modal when user presses keyboard Esc key
$(document).on('keyup', function (e) {
    if (e.key === 'Escape') {
        $('.modal').removeClass('active');
    }
});

As modal window support different sizes - use small, large, fluid class in modal content. Example -

<div class="modal-content large"></div>

SASS

Reference from _modal.scss. To better browser compatibility use traditional implementation of modal layout via changing $modal-layout variable to traditional.

$modal-content-radius: rem(2) !default;
$modal-content-spacing: rem(20) !default;
$modal-content-shadow: 0 rem(5) rem(5) 0 rgba(0, 0, 0, 0.1) !default;
$modal-layout: css-grid !default; /* css-grid || traditional || flex */

:root {
    --r-modal-background: rgba(0, 0, 0, 0.5);
    --r-modal-content-background: var(--r-color-white);
    --r-modal-close-color: var(--r-color-white-darken-50);
    --r-modal-content-radius: #{$modal-content-radius};
    --r-modal-content-spacing: #{$modal-content-spacing};
    --r-modal-content-shadow: #{$modal-content-shadow};
    --r-modal-border-color: var(--r-color-white-darken-5);    
}