Nana's Plush Muppet

    ab-modal

    0.0.6 • Public • Published

    ab-modal

    Hyper-minimal Vanilla JS Modal.

    • Plug&Play, no Markup or CSS are required.
    • Can be styled using the options object.
    • DOM is only used while modal is active. The modal is removed from the DOM on close.
    • All UI elements (title / text / OK button / CANCEL button) are optional and customizable.
    • A simple fade-out is enabled by default when closing the model, can be disabled.
    • Individual callbacks can be passed to the OK or CANCEL buttons.
    • And more options. See the default options below.

    Install

    With npm do:

    $ npm install ab-modal --save-dev

    Usage

    var modal = require('ab-modal');
    
    // Standard example: Modal with title, text, OK and CANCEL
    
    modal.createModal(
    {
    	titleText				: 'Question of the day',
    	textText				: 'Do you like coffee?',
    	confirmButtonText 		: 'Yes',
    	cancelButtonText 		: 'No',
    	confirmCallback			: function() { console.log('So we will bring coffee!')},
    	cancelCallback			: function() { console.log('So we will bring tea!')},
    });
    
    // Simplest example: Modal with title, OK
    
    modal.createModal(
    {
    	titleText				: 'Coffee is over',
    	confirmButtonText 		: 'OK',
    	// no callBack was passed, the modal will simply close when clicking 'OK'
    });
    
    // All the default values are shown below
    
    modal.createModal(
    {
    	debug 					: false,
    	closeOnOKClick 			: false,
    	titleText				: 'Title',
    	textText				: 'Text',
    	confirmButtonText 		: 'OK',
    	cancelButtonText 		: 'Cancel',
    	showTitle 				: true,
    	showText 				: true,
    	fontFamily 				: null,
    	titleMarginBottom 		: '30px',
    	buttonsMarginTop 		: '30px',
    	modalBorderRadius 		: '2px',
    	buttonsBorderRadius 	: '2px',
    	showConfirmButton 		: true,
    	showCancelButton 		: true,
    	confirmButtonColor 		: '#2ecc71',
    	cancelButtonColor 		: '#333',
    	confirmButtonTextColor	: 'white',
    	cancelButtonTextColor	: 'white',
    	defaultCancelIsClose	: true,
    	defaultOKIsClose		: false,
    	cancelCallback			: null,
    	confirmCallback			: null,
    	fadeOut					: true,
    	modalPadding			: '26px 70px 20px 70px',
    });
    

    License

    MIT

    Keywords

    Install

    npm i ab-modal

    DownloadsWeekly Downloads

    9

    Version

    0.0.6

    License

    MIT

    Last publish

    Collaborators

    • antoniobrandao