0.0.7 • Published 10 years ago

modaljs v0.0.7

Weekly downloads
3
License
MIT
Repository
github
Last release
10 years ago

Modal

modal

Install

npm install modaljs    

var Modal = require('modaljs');

if not using browerify/webpack simply copy modal.js and modal.css.

See the example in example folder.

Usage

create the modal box
var modal = Modal(); // returns the same modal obj every time.

 // use this to create new  modal if close
modal.create({       
    _class: 'modal--doSomething',
    header: 'My custom header',
    body: 'My modal body text',
    footer: {confirmText: 'CONFIRM', cancelText: 'CANCEL'},
});

modal.open();

Use _class to add custom modal css for different situations.

Pass null for footer options if dont want confirm or cancel.

html generated
<div class="modal is-active">
    <div class="modal__backdrop"></div>
    <div class="modal__inner">
        <div class="modal__header"></div>
        <div class="modal__body"></div>
        <div class="modal__footer"></div>
        <div class="modal__close"></div>
    </div>
</div>

This html will be generated only once for the first time automatically.

Css

Copy the css from modal.css. is-active class is appled on open.

Callbacks
var modal = Modal();
modal.create({
    _class: 'modal--doSomething',
    header: 'My custom header',
    body: 'My modal body text',
    done: function() { },
    confirm: function() { },
    cancel: function() { }
});

done is called after modal.create().

confirm is called on confirm button click.

cancel is called on close button click.

Use this.$el to access the modal element inside any of these callbacks.

update the modal box
var modal = Modal();

//  use this if updating the modal keeping the 
//  prev values of header, footer.
modal.update({  
  _class: 'modal--success',
  body: 'delete Success',
  footer: {confirmText: null, cancelText: null},
});
close the modal
modal.close(); // close immediately

modal.close(2000); // to close after 2000ms
0.0.7

10 years ago

0.0.6

10 years ago

0.0.5

10 years ago

0.0.4

10 years ago

0.0.3

10 years ago

0.0.2

10 years ago

0.0.1

10 years ago

0.0.0

10 years ago