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
$('.js-open-modal').click(function() {
    let modal = $(this).attr('data-modal');

    $(modal).addClass('active');
});

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

// Closing modal when user pressed keyboard Esc key
$(document).keyup(function(e) {
    if (e.keyCode === 27) {
        $('.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 varibale to traditional.

$modal-background: rgba(map-get($colors, dark), 0.5);
$modal-content-background: map-get($colors, white);
$modal-content-radius: rem(2);
$modal-content-spacing: rem(20);
$modal-content-shadow: 0 rem(5) rem(5) 0 rgba(0,0,0, 0.1);
$modal-border-color: darken(map-get($colors, white), 5%);
$modal-layout: css-grid; // css-grid || traditional || flex