Sweet, easy and powerful.
View on GitHub

Replace alert(),  confirm(),  prompt() and many plugins with style and elegance.

Alert

$.sweetModal('This is an alert.');

Alert with Success Icon

$.sweetModal({
	content: 'This is a success.',
	icon: $.sweetModal.ICON_SUCCESS
});

Alert with Warning Icon

$.sweetModal({
	content: 'This is a warning.',
	icon: $.sweetModal.ICON_WARNING
});

Alert with Error Icon and Button

$.sweetModal({
	content: 'This is an error.',
	title: 'Oh noes…',
	icon: $.sweetModal.ICON_ERROR,

	buttons: [
		{
			label: 'That\'s fine',
			classes: 'redB'
		}
	]
});

Alert with Title

$.sweetModal('Titled Alert', 'This is an alert.');

Confirm

$.sweetModal.confirm('Confirm please?', function() {
	$.sweetModal('Thanks for confirming!');
});

Confirm with Title

$.sweetModal.confirm('Titled Confirm', 'Confirm please?', function() {
	$.sweetModal('Thanks for confirming!');
}, function() {
	$.sweetModal('You declined. That\'s okay!');
});

Prompt

$.sweetModal.prompt('Can I haz cheezeburger?', null, null, function(val) {
	$.sweetModal('You typed: ' + val);
});

Prompt with Value

$.sweetModal.prompt('Can I haz cheezeburger?', 'Can I?', 'Nope', function(val) {
	$.sweetModal('You typed: ' + val);
});

Tabbed

$.sweetModal({
	title: {
		tab1: {
			label: 'Tab 1'
		},

		tab2: {
			label: 'Tab 2'
		}
	},

	content: {
		tab1: 'Tab 1',
		tab2: 'Tab 2'
	}
});

Tabbed with Buttons

$.sweetModal({
	title: {
		tab1: {
			label: 'Tab 1'
		},

		tab2: {
			label: 'Tab 2'
		}
	},

	content: {
		tab1: 'Tab 1',
		tab2: 'Tab 2'
	},

	buttons: {
		someOtherAction: {
			label: 'Action 2',
			classes: 'secondaryB bordered flat',
			action: function() {
				return $.sweetModal('You clicked Action 2!');
			}
		},

		someAction: {
			label: 'Action 1',
			classes: '',
			action: function() {
				return $.sweetModal('You clicked Action 1!');
			}
		},
	}
});

Tabbed with Icons

$.sweetModal({
	title: {
		tab1: {
			label: 'Tab 1',
			icon: '<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#000000" d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" /></svg>'
		},

		tab2: {
			label: 'Tab 2',
			icon: '<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#000000" d="M12,17L7,12H10V8H14V12H17L12,17M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5M12,4.15L5,8.09V15.91L12,19.85L19,15.91V8.09L12,4.15Z" /></svg>'
		}
	},

	content: {
		tab1: 'Tab 1',
		tab2: 'Tab 2'
	}
});

HTML-Content

$.sweetModal({
	title: 'HTML Content',
	content: 'You can place <b>anything</b> <i>you</i> want in here.'
});

HTML-Content (Dark)

$.sweetModal({
	title: 'HTML Content',
	content: 'You can place <b>anything</b> <i>you</i> want in here.',
	theme: $.sweetModal.THEME_DARK
});

YouTube

$.sweetModal({
	title: 'Will YouTube Ever Run Out Of Video IDs?',
	content: 'https://www.youtube.com/watch?v=gocwRvLhDf8',
	theme: $.sweetModal.THEME_DARK
});

Installation

Note: You need to have jQuery installed to use SweetModal.

Package Managers

$ bower install sweet-modal
$ npm install sweet-modal


Manual

  1. Download
  2. <link rel="stylesheet" href="sweet-modal/dist/min/jquery.sweet-modal.min.css" />
    <script src="sweet-modal/dist/min/jquery.sweet-modal.min.js"></script>

Options

This is an overview of all available options. If you want to override an option for every instance, you can override the corresponding key in $.sweetModal.defaultSettings.
For overriding implied values, see "Overrides".

Modal

Name Default Value Description
title
''
Title. If empty or falsy, the modal becomes type alert.

If this is an object, the modal becomes tabbed. More information at tab options.
content
''
Content of the modal. Allows HTML.

If title is an object, this has to be an object as well. The keys have to be the same keys as the title's keys with corresponding contents.
icon
''
(Animated) icon inside the modal.

- $.sweetModal.ICON_SUCCESS
- $.sweetModal.ICON_WARNING
- $.sweetModal.ICON_ERROR
classes
[]
Additional CSS classes to add to the overlay element.
showCloseButton
true
Whether or not to show the close button. If you hide it, make sure to have disabled blocking or provide any other method to close the modal.
blocking
false
Whether or not to allow the user to dismiss the modal by clicking the overlay.

This is overriden to true by default for all confirm and prompt modals.
timeout
null
Auto-closes the modal after a certain amount of milliseconds. If falsy no auto-closing will be done.
theme
$.sweetModal.THEME_LIGHT
Theme to use:

- $.sweetModal.THEME_LIGHT
- $.sweetModal.THEME_DARK
- $.sweetModal.THEME_MIXED

You can also theme components individually (currently overlay and modal) by setting this to an array containing a configuration of these constants:

- $.sweetModal.THEME_COMPONENTS.LIGHT_OVERLAY
- $.sweetModal.THEME_COMPONENTS.LIGHT_MODAL
- $.sweetModal.THEME_COMPONENTS.DARK_OVERLAY
- $.sweetModal.THEME_COMPONENTS.DARK_MODAL

Any non-provided component defaults to its LIGHT setting.
width
'auto'
Any width accepted by CSS, i.e. 256px, 100% or 4cm.
type
$.sweetModal.TYPE_MODAL
Type of modal:
- $.sweetModal.TYPE_MODAL (regular styles)
- $.sweetModal.TYPE_ALERT (styles specifically for alerts)
buttons
{}
This can either be an array or an object.
If it is an object you can omit button labels to make the object keys the labels.
See button options for individual options.
onOpen
function() {}
Callback running when the modal is being opened.
Receives the SweetModal instance as first argument.
onClose
function() {}
Callback running when the modal is being closed.

Tabs

Name Default Value Description
label '' The label of the tab. If no label is given, the tab becomes icon-only.
icon '' An SVG string or any other HTML image tag containing the logo.
If this is an SVG string its colors will be modified via CSS.
iconCSS {} Specific CSS rules for the icon. Uses $.css-syntax, i.e. marginTop.

Buttons

Name Default Value Description
label
''
1.3 The label for the button. If this is falsy (but not empty), the key of the button object is used as the label.
action
function(sweetModal) {}
Callback to run if the user presses the button. The callback receives an object of the currently active modal as the first argument.
Return false to stop the modal from automatically closing.
classes
''
Additional CSS classes for the button.
Ideally you use the color classes provided by sweetModal here:

- secondaryB
- redB
- blueB
- greenB
- darkGreyB
- lightGreyB
- yellowB
- purpleB
- tealB
- brownB
- orangeB
- pinkB

Overrides

There are implied values used by the plugin to enable convenient alert, confirm and prompt calls.
This is a list of all implied values (path inside $.sweetModal.defaultSettings):

Path Default Value Description
confirm.yes.label
'Yes'
Label of the "Yes" button
confirm.yes.classes
'greenB'
Space-seperated list of classes to add to the "Yes" button
confirm.ok.label
'OK'
Label of the "OK" button
confirm.ok.classes
'greenB'
Space-seperated list of classes to add to the "OK" button
confirm.cancel.label
'Cancel'
Label of the "Cancel" button
confirm.cancel.classes
'redB bordered flat'
Space-seperated list of classes to add to the "Cancel" button

Adapters

SweetModal comes with some adapters built-in. Here's what they do:

alert()

By calling $.sweetModal.mapNativeFunctions() you can override the browser's alert()-function to use $.sweetModal.
Note: In contrast to alert(), SweetModal does NOT block further code execution.

$.confirm

Automatically assigned if $.confirm is not defined already. This adapts (mostly) compatible calls to $.sweetModal.
$.confirm is a custom jQuery plugin showcased by Tutorialzine.

License & Copyright

/*!
 * SweetModal: Sweet, easy and powerful modals and dialogs
 * http://github.com/adeptoas/sweet-modal
 *
 * Copyright (c) 2016 Adepto.as AS · Oslo, Norway
 * Dual licensed under the MIT and GPL licenses.
 *
 * See LICENSE-MIT.txt and LICENSE-GPL.txt
 */