CSS backdrop-filter

_backdrop-filter-modal.scss

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.8);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.backdrop-filter-modal {
    display: flex;
    justify-content: center;
    width: 100%;

    &[data-overlay='true'] {
        &:after {
            content: '';
            z-index: 101;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba($navy, 0.4);
            backdrop-filter: blur(2px);
        }
    }


    &__trigger {
        padding: $spacing-sml;
        background-color: $navy;
        color: $white;
        border: none;
        cursor: pointer;
    }

    &__modal {
        z-index: 1000;
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 500px;
        height: 500px;
        max-width: 100vh;
        max-height: 80vh;
        padding: $spacing-med;
        background-color: $white;
        box-shadow: $default-box-shadow;


        &[data-is-open='true'] {
            display: flex;
            opacity: 0;
            transform: translate(-50%, -50%) scale(.8);
            animation: fade-up $transition-timing-fast $transition-easing-cubic forwards;
        }
    }
}

backdrop-filter-modal.njk

<div class="backdrop-filter-modal" data-module="examples/backdrop-filter/backdrop-filter-modal/BackdropFilterModal">
    <button class="backdrop-filter-modal__trigger" data-trigger>Open modal</button>
    <div class="backdrop-filter-modal__modal" data-modal>
        <h1>Boo!!!</h1>
        <button class="backdrop-filter-modal__trigger" data-close>Woooo, now close!</button>
    </div>
</div>

BackdropFilterModal.js

// Constants
const constants = {
    attributes: {
        DATA_TRIGGER: 'data-trigger',
        DATA_MODAL: 'data-modal',
        DATA_CLOSE: 'data-close',
        DATA_IS_OPEN: 'data-is-open',
        DATA_OVERLAY: 'data-overlay'

    },
};

class BackdropFilterModal {
    constructor(element, options) {
        this._element = element;
        this._options = options;

        this._init();
    }

    _state = {
        isOpen: false
    }

    /**
     * Toggle modal open or closed
     */
    _toggleModal() {
        this._state.isOpen = !this._state.isOpen;
        this._modal.setAttribute(constants.attributes.DATA_IS_OPEN, `${this._state.isOpen}`);
        this._element.setAttribute(constants.attributes.DATA_OVERLAY, `${this._state.isOpen}`);
    }

    /**
     * Inititalize all event listeners
     */
    _addEventListeners() {
        this._trigger.addEventListener('click', this._toggleModal.bind(this));
        this._close.addEventListener('click', this._toggleModal.bind(this));
    }

    /**
     * Cache all selectors for further use
     */
    _cacheSelectors() {
        this._trigger = this._element.querySelector(`[${constants.attributes.DATA_TRIGGER}]`);
        this._modal = this._element.querySelector(`[${constants.attributes.DATA_MODAL}]`);
        this._close = this._element.querySelector(`[${constants.attributes.DATA_CLOSE}]`);
    }

    /**
     * Inititalize component
     */
    _init() {
        this._cacheSelectors();
        this._addEventListeners();
    }
}

export default BackdropFilterModal;