basicModal

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.

Demos

Name	Description	Link
Alert	Modal similar to `alert()`. The modal contains a message and a button. The message can be filled with HTML and the button fires the specified function when pressed.	Demo
Prompt	The prompt dialog is great when you want a decision or answer from the user.	Demo
Login	Building a login with basicModal is super easy. It includes everything you need, like the ability to highlight invalid input.	Demo

Features

Works in all modern browsers
Zero dependencies
CommonJS and AMD support
Support for text inputs
Highlight invalid input
Execute dialogs in row

Installation

We recommend to install basicModal using Bower or npm.

bower install basicModal
npm install basicmodal

Requirements

basicModal dependents on the following browser APIs:

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

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>

Functions

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

Options

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

basicModal.show({

	// String containing HTML (required)
	body: '<p>String containing HTML</p>',
	
	// String - List of custom classes added to the modal (optional)
	class: 'customClass01 customClass02',
	
	// Boolean - Define if the modal can be closed with the close-function (optional)
	closable: true,
		
	// Function - Will fire when modal is visible (optional)
	callback: undefined,
	
	// Object - basicModal accepts up to two buttons and requires at least one of them
	buttons: {
	
		cancel: {
		
			// String (optional)
			title: 'Cancel',
			
			// String - List of custom classes added to the button (optional)
			class: 'customButtonClass',
			
			// Function - Will fire when user clicks the button (required)
			fn: function(data) { console.log(data) }
			
		},
		
		action: {
		
			// String (optional)
			title: 'OK',
			
			// String - List of custom classes added to the button (optional)
			class: 'customButtonClass',
			
			// Function - Will fire when user clicks the button (required)
			fn: function(data) { console.log(data) }
			
		}
		
	}

})

Artyom4D / basicModal