A simple tool to create modals with pure css for the rendering and a little js for integration.
Comes with a modalify.js
file and a modalify.css
file to integrate.
-
modalify is registered as a library in the DOM. It is available as follows :
window.modalify
-
modalify.init
It takes two options: selector, where to render the modal container (default is after the body), and template to change the modal template
//init examples
modalify.init();
modalify.init({template: myModalTemplate, selector: "div#my-super-selector"});
modalify.addElement
, takes three arguments: title: the modal title, by default it is "", el the domElement to inject into the modal container. If you are working with Backbone, theel
is yourview.el
., the type allows you to define the width of the modal. Types are defined inconfig.json
:extra-small
,small
,medium
,large
.[large by default]
modalify.addElement({
title: i18n.t('myModalTitle'),
el: myView.el,
type: "medium" //Optional large by default
});
- The
addElement
method should be called when a user action triggers a modal opening. The user action triggering a modal opening must be a link with a targer equals to #modalify-container.
document.querySelector('a[href="#modalify-container"]').addEventListener('click', function(event){
modalify.addElement({el: a, title: "Test Pierre"});
});
- On the close action of the modal, which you have to implement in your page, you have to call
modalify.close()
it will close the modal and restore the url of the page before the modal opening.
bower install --save modalify