Easy-to-use dialog system for modern web-apps.

basicModal is a dialog-system for modern web-apps. It includes everything you need to display information, ask questions or request input from the user. Dialogs can be chained, so you can easily build a setup-assistant or show messages in a predefined order. Invalid input can be highlighted and handled using the included function.

basicModal is written in Vanilla JS and has zero dependencies. It uses SASS and Flexbox.

Tested with the latest versions of Mozilla Firefox, Apple Safari, Google Chrome, Microsoft Internet Explorer (10+) and Opera.

• Works in all modern browsers
• Zero dependencies
• Support for text inputs
• Highlight invalid input
• Execute dialogs in row

We recommend to install basicModal using Bower or npm.

bower install basicModal
npm install basicmodal

basicModal dependents on the following browser APIs:

• classList
• Flexible Box Layout Module

Some of these APIs are capable of being polyfilled in older browser. Check the linked resources above to determine if you must polyfill to achieve your desired level of browser support.

Include the CSS file in the head and the JS file at the end of your body.

<link rel="stylesheet" href="dist/basicModal.min.css">
<script src="dist/basicModal.min.js"></script>

You can find a list of available functions on our site.

List of options you can pass to the basicModal.show-function:

{
	body: '<p>String containing HTML</p>',
	class: 'customClass01 customClass02',
	closable: true,
	callback: undefined,
	buttons: {
		cancel: {
			title: 'Cancel',
			class: 'customButtonClass',
			fn: function(data) { console.log(data) }
		},
		action: {
			title: 'OK',
			class: 'customButtonClass',
			fn: function(data) { console.log(data) }
		}
	}
}

basicModal accepts up to two buttons: cancel and action. Both of them can have the following options: