Skip to content

A simple jquery Modal boxes with alert, prompt and confirm support.

License

Notifications You must be signed in to change notification settings

ferroariel/jquery.modal

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

jquery.modal

A simple jquery Modal boxes.

Demo Page

Usage

The function is called 'modal'. So just call it ;)

modal({
	 type       : 'default',
	 title      : 'Title',
	 text       : 'It works.',
	 buttons    : [{text:'OK', val:true, onClick:function(e){return true} }, {text:'Cancel', val:'cancel', 	
	 onClick    : function(e){alert('If function return false, modal will not disappear.'); return false} }],
	 center     : true,
	 autoclose  : false,
	 callback   : null,
	 onShow     : function(e){console.log(e);},
	 closeClick : true,
	 closable   : true,
	 theme      : 'default',
	 background : 'rgba(0,0,0,0.5)',
	 zIndex     : 1050,
	 buttonText : {ok:'OK',yes:'Yes',cancel:'Cancel'},
	 template   : '<div class="modal-box"><div class="modal-title"><a class="modal-close-btn"></a></div><div class="modal-text"></div><div class="modal-buttons"></div></div>',
	 _classes   : {box:'.modal-box', title:'.modal-title', content:'.modal-text', buttons:'.modal-buttons', closebtn:'.modal-close-btn'}
});

Options

  • type is type of Modal Box, can be : alert | confirm | prompt | success | warning | error | info | primary | inverted.
  • title is title of modal, if is null - title div will disappear
  • text is modal inner HTML content
  • buttons is an array with buttons. Each button is in an object array and contais: text, val, addClass: Class for button(btn-large | btn-small | btn-green | btn-light-green | btn-purple | btn-orange | btn-pink | btn-turquoise | btn-blue | btn-light-blue | btn-light-red | btn-red | btn-yellow | btn-white | btn-black | btn-rounded | btn-circle | btn-square), onClick(return){} callback('return' contains is an object with keys: bObj - button clicked, bOpts - info abou clicked button from options, val - button value; methods: getContet, getTitle, getModal, setClosable, setContent, setTitle; if function returns false - modal will not disappear)
  • center Center align?, can be true or false
  • autoclose Autoclose Modal?, can be true or false,
  • callback Callback function after modal close, it has a parameter with value and if function returns false, modal will not disappear
  • onShow After modal appearing, it has a parameter with modal object
  • closeClick On click near the modal box, close it
  • closable Enable Modal closing
  • theme Custom class for your modal, Example: 'xenon'
  • background Background Color of modal overlay
  • zIndex Modal z-index
  • buttonText Custom text for alert, confirm and prompt modals
  • template Custom modal template
  • _classes An object with each class name from modal box

License

Licensed under MIT license.

About

A simple jquery Modal boxes with alert, prompt and confirm support.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published