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.
| 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 |
- Works in all modern browsers
- Zero dependencies
- CommonJS and AMD support
- Support for text inputs
- Highlight invalid input
- Execute dialogs in row
basicModal depends on the following browser APIs:
Some of these APIs are capable of being polyfilled in older browsers. Check the linked resources above to determine if you must polyfill to achieve your desired level of browser support.
We recommend to install basicModal using Bower or npm.
bower install basicModalnpm install basicmodalInclude the CSS file in the head tag and the JS file at the end of your body tag…
<link rel="stylesheet" href="dist/basicModal.min.css"><script src="dist/basicModal.min.js"></script>…or skip the JS file and use basicModal as a module:
const basicModal = require('basicmodal')Lets start with a 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.
basicModal.show({
body: '<p>This is a dead-simple alert modal!<br>The message can be filled with anything you want.</p>',
buttons: {
action: {
title: 'Dismiss',
fn: basicModal.close
}
}
})The prompt dialog is great when you want a decision or answer from the user. The only difference from the first example is the additional button.
basicModal.show({
body: '<p>This type of modal can be used to ask the user questions. Are you sure you want to continue?</p>',
buttons: {
cancel: {
title: 'Cancel',
fn: basicModal.close
},
action: {
title: 'Continue',
fn: basicModal.close
}
}
})Building an input-dialog with basicModal is super easy. It includes everything you need, like the ability to highlight invalid fields. The specified action-button-function receives an object which includes the values of all inputs. Use the name attribute in your HTML to set the name of the inputs.
basicModal.show({
body: '<p>This type of modal can be used to ask the user questions. Please enter your name:</p><input class="basicModal__text" type="text" name="name" placeholder="Jane Doe">',
buttons: {
cancel: {
title: 'Cancel',
fn: basicModal.close
},
action: {
title: 'Continue',
fn: (data) => {
if (data.name.length===0) return basicModal.error('name')
console.log(data)
basicModal.close()
}
}
}
})basicModal comes with a handful of handy functions. Below are all of them along with a short description.
The most important function of basicModal. Call show to show a modal. The object you pass to the function includes all the information about the modal. Take a look at the demos above to get a feel of the capabilities.
basicModal.show(options: object)Use the error function to highlight invalid input. This function can only be used when the modal has input elements. Each input needs a name attribute as shown in the example above. The input with the matching attribute will be marked red and the modal will shake to signal an error. This function also executes the reset function, to remove previous errors and to reactive the buttons.
basicModal.error(nameAttribute: string)Check if there's a visible modal. Returns true when a modal is visible and false otherwise.
basicModal.visible() : booleanYou can trigger the buttons of the modal manually if wanted. Triggering a button is equivalent to clicking them.
basicModal.action() : booleanbasicModal.cancel() : booleanIn order to avoid multiple executions of the same function, buttons can only be pressed once before being disabled. Use reset if you want to reactivate the buttons or to reset the highlighted input errors.
basicModal.reset() : booleanThe following function returns an object, which includes all input values from the current modal.
basicModal.getValues() : objectAnd finally: Close the modal. You can force close a modal by passing true to the function. This is required when the modal is created with the closable property set to false.
basicModal.close(forceClose: boolean) : booleanList 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: basicModal.close
},
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: (data) => basicModal.close()
}
}
})Run
npm install
Run
npm run compile
it will create a minimized version of the JS code and a CSS style file from the SASS sources in ./dist.
The build system uses Gulp Babel to "transpile" modern ECMA Script code for older browsers.
The build system reads babel.config.json for a list of minimum supported browser versions.
This file should be updated once in a while.
According to Babel Docs | Config Options | Tagets the following targets are supported: android, chrome, edge, electron, firefox, ie, ios, node, opera, rhino, safari, and samsung.
A list of browser versions can be obtained via
npx browserslist --mobile-to-desktop ">0.5%, not dead"