A simple jquery Modal boxes, alert, prompt, confirm, themes, buttons, animations, responsive and many other options included.
CSS JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Permalink
Failed to load latest commit information.
css Update jquery.modal.css Aug 28, 2015
js The onShow now called after the dialog is displayed (end of fadein) s… Jun 8, 2015
LICENSE Initial commit Jan 7, 2014
README.md Update README.md Aug 5, 2015
bower.json v1.2.3 Apr 10, 2015
index.html v1.2.3 Apr 10, 2015

README.md

jQuery.modal 1.2.3

A simple jQuery Modal plugin.

Demo | Documentation

Usage

Styles:

Include the jquery.modal css file in your html page.

<link href="jquery.modal.css" type="text/css" rel="stylesheet" />

Javascript:

Include the jQuery library and jquery.modal script file in your html page.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.modal.min.js"></script>

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

modal({
	type: 'inverted', //Type of Modal Box (alert | confirm | prompt | success | warning | error | info | inverted | primary)
	title: 'Message', //Modal Title
	text: 'Text', //Modal HTML Content
	size: 'normal', //Modal Size (normal | large | small)
	buttons: [{
		text: 'OK', //Button Text
		val: 'ok', //Button Value
		eKey: true, //Enter Keypress
		addClass: 'btn-light-blue', //Button Classes (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 | btn-disabled)
		onClick: function(dialog) {
			console.log(dialog);
			alert('Look in console!');
			return true;
		}
	}, ],
	center: true, //Center Modal Box?
	autoclose: false, //Auto Close Modal Box?
	callback: null, //Callback Function after close Modal (ex: function(result){alert(result); return true;})
	onShow: function(r) {}, //After show Modal function
	closeClick: true, //Close Modal on click near the box
	closable: true, //If Modal is closable
	theme: 'atlant', //Modal Custom Theme (xenon | atlant | reseted)
	animate: false, //Slide animation
	background: 'rgba(0,0,0,0.35)', //Background Color, it can be null
	zIndex: 1050, //z-index
	buttonText: {
		ok: 'OK',
		yes: 'Yes',
		cancel: 'Cancel'
	},
	template: '<div class="modal-box"><div class="modal-inner"><div class="modal-title"><a class="modal-close-btn"></a></div><div class="modal-text"></div><div class="modal-buttons"></div></div></div>',
	_classes: {
		box: '.modal-box',
		boxInner: ".modal-inner",
		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 | btn-disabled), 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
  • animate Enable slide Animation
  • theme Custom class for your modal (default | xenon | atlant | reseted)
  • 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.