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
// 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"><i class="iconoir-xmark"></i></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 modal-footer-right">
<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>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);
}