JB Framework

Modals

Animations

Show basic modal Show fade-only modal Show modal without animations

<script>
function showModal() {
    Modal.show({
        text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    });
}

function showModalFade() {
    Modal.show({
        animationContent: 'fade',
        positionContent: '',
        text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    });
}

function showModalNoAnimation() {
    Modal.show({
        animationContent: null,
        animationOverlay: null,
        text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    });
}
</script>

Non-cancelable

Show non-cancelable modal

<script>
function showModalNoCancel() {
    Modal.show({
        text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
        closeable: false,
    });
}
</script>

Callback

Show modal with callback

<script>
function showModalCallback() {
    Modal.show({
        text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
        closeFn: function() {
            document.body.style.background = 'lime';
        },
    });
}
</script>

Options and callbacks

Show modal with multiple options and callback

<script>
function showModalOptions() {
    Modal.show({
        text: 'Pick a color.',
        options: [
            {
                text: 'Red',
                class: 'button--alert',
                fn: function() {
                    document.body.style.background = 'red';
                },
            },
            {
                text: 'Blue',
                fn: function() {
                    document.body.style.background = 'blue';
                },
            },
        ],
    });
}
</script>