Freepik Design

Modals

Basic structure

You can change the close button position by changing the modifier modal__close--{top-left|top-right|bottom-left|bottom-right}.

Tips & advice

Models can be multilayer, this means you could have another modal over an active modal, currently we only support one level. Add the data-multilayer="true" attribute to the modal.

<button class="button button--md button--flat modal__trigger" data-modal="modal-basic">
        <span class="button__text">{...}</span>
    </button>

    <div id="modal-basic" class="modal modal--xs">    
        <div class="modal__container">       
            <div class="content">
                <button class="modal__close modal__close--absolute modal__close--top-right button button--icon  button--sm button--inverted nostyle">
                    <i class="icon icon--sm icon--mg-sm icon--cross"></i>
                </button>
                
                <p class="mg-none">{...}</p>                
            </div>
        </div>      
    </div>

Show a modal in js

You can show a model from your js, importing the library 'import {modal} from 'BobjollModal'.

modal.show('modal-basic');

Hide a modal in js

Tips & advice

Modals are hidden automatically if you click outside, this behavior can be disabled by adding data-disable-mouse-up="true" attribute to the modal.

You can hide modals from your js, importing the library 'import {modal} from 'BobjollModal'.

modal.hide();

Dynamic

You can dynamically add models in js with this command, you can define the html then or later.

modal.add({
        name: string;
        html?: string;
        media?: string;
        multilayer?: boolean;
    })

Print

This method will add the model if it doesn't exist, update the html and show it.

modal.print({
        name: string;
        html?: string;
        media?: string;
        multilayer?: boolean;
    })