Flip Modal

Class Name

Background Overlay

Modal Background Color

Modal Text Color

Border Radius

Content Padding

Transition Speed

Modal with a funky horizontal flip animation

<div class="flip-modal">
    <div class="modal-background">
        <div class="modal" id="csslab-flip-modal">
             <h3 class="modal-header">CSSLab Is Awesome!</h3>

            <div class="modal-content">
                <p>Modal content goes here!</p>
                <button class="modal-content-button modal-close">Close Modal</button>
            </div>
        </div>
    </div>
    <button class="flip-modal-button push-button-3d" data-id="csslab-flip-modal">Open Flip Modal</button>
</div>

<div class="flip-modal">
    <div class="modal-background">
        <div class="modal" id="csslab-flip-modal">
             <h3 class="modal-header">CSSLab Is Awesome!</h3>

            <div class="modal-content">
                <p>Modal content goes here!</p>
                <button class="modal-content-button modal-close">Close Modal</button>
            </div>
        </div>
    </div>
    <button class="flip-modal-button push-button-3d" data-id="csslab-flip-modal">Open Flip Modal</button>
</div>

class Modal {
    constructor(modalButton) {
        this.element = modalButton;
        this.modalID = modalButton.dataset.id;
        this.modalNode = document.querySelector(`#${this.modalID}`);
        this.modalParent = this.modalNode.parentNode;
        this.open = false;

        this.modalInit();
    }

    modalInit = () => {
        this.element.addEventListener('click', this.openModal);
        this.modalParent.addEventListener('mousedown', this.handleOverlayClick);

        let closeButtons = this.modalNode.querySelectorAll('.modal-close');
        closeButtons.forEach(cur => cur.addEventListener('click', this.closeModal))
    }

    openModal = () => {
        this.modalParent.classList.add('modal-background--active');

        this.modalNode.classList.add('modal--active');

        this.open = !this.open;
    }

    closeModal = () => {
        this.modalParent.classList.remove('modal-background--active');

        this.modalNode.classList.remove('modal--active');

        this.open = !this.open;
    }

    handleOverlayClick = (e) => {
        if (!e.target.closest('.modal')) {
            this.closeModal();
        }
    }
}

let buttons = document.querySelectorAll('.flip-modal-button');
buttons.forEach(cur => new Modal(cur));

class Modal {
    constructor(modalButton) {
        this.element = modalButton;
        this.modalID = modalButton.dataset.id;
        this.modalNode = document.querySelector(`#${this.modalID}`);
        this.modalParent = this.modalNode.parentNode;
        this.open = false;

        this.modalInit();
    }

    modalInit = () => {
        this.element.addEventListener('click', this.openModal);
        this.modalParent.addEventListener('mousedown', this.handleOverlayClick);

        let closeButtons = this.modalNode.querySelectorAll('.modal-close');
        closeButtons.forEach(cur => cur.addEventListener('click', this.closeModal))
    }

    openModal = () => {
        this.modalParent.classList.add('modal-background--active');

        this.modalNode.classList.add('modal--active');

        this.open = !this.open;
    }

    closeModal = () => {
        this.modalParent.classList.remove('modal-background--active');

        this.modalNode.classList.remove('modal--active');

        this.open = !this.open;
    }

    handleOverlayClick = (e) => {
        if (!e.target.closest('.modal')) {
            this.closeModal();
        }
    }
}

let buttons = document.querySelectorAll('.flip-modal-button');
buttons.forEach(cur => new Modal(cur));

csslab

CSSLab Links

Selections