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--icon--only 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; })