Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create custom alert, confirm, or Prompt dialogue containers on a webpage.

Just include the dist/attention.js the script in your project and put the text before the closing body tag. You also need to put your CSS in your project’s dist/attention.css file.

Must Read: Custom Alert, Prompt, And Confirm Box Using jQuery | Dialogs Manager

Table of Contents

How to make use of it:

1. To use this plugin include the attention.css or attention.js files on the web page.

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

2. Create an alert dialog.

new Alert({
    title: 'Alert Title',
    content: 'Alert Message'
});

3. Create a confirm dialog with callbacks.

new Confirm({
    title: 'Confirm Title',
    content: 'Are You Sure',
    buttonCancel: false, // custom button text
    buttonConfirm: false,
    onAccept(component) {
      console.log('Accepted');
    },
    onCancel(component) {
      console.log('Canceled');
    }
});

4. Create a prompt dialog.

new Prompt({
    title: 'Prompt Title',
    content: 'Prompt Message',
    placeholderText: false, // custom placeholder
    submitText: false, // custom submit text
    onSubmit(component, value) {
      console.log(value)
    }
});

5. Allows HTML content within the dialog.

new Confirm({
    title: 'Confirm Title',
    content: 'Are You Sure',
    buttonCancel: false, // custom button text
    buttonConfirm: false,
    useInnerHTML: true,
    onAccept(component) {
      console.log('Accepted');
    },
    onCancel(component) {
      console.log('Canceled');
    }
});

6. More callback features.

new Alert({
    beforeRender: function(){
      // do something
    },
    afterRender: function(){
      // do something
    },
    beforeClose: function(){
      // do something
    },
    afterClose: function(){
      // do something
    }
});

Config / Option

When creating a new object for an alert, prompt, or assertion, an object must be passed. This object contains some options that you can change.

Must Read: Insert HTML Into Your Browser Alert & Confirm Dialog | alert4html.js

key	description	type	mandatory
title	Title	string	true
content	Content	string	true
buttonCancel	Text for the cancel button (confirm)	string	false
buttonConfirm	Text for the confirm button (confirm)	string	false
placeholderText	Placeholder text (prompt)	string	false
submitText	Text for the submit button (prompt)	false

Callbacks

Attention provides a lot of life cycle routes. These methods allow changing the component’s life behavior.

Below is a list of available methods. These methods are available in each component.

Must Read: A Lightweight Front-End Confirmation Modal Dialog | confirmo

name	description
beforeRender	fires before rendering a component
afterRender	fires after rendering a component
beforeClose	fires before closing a component
afterClose	fires after closing a component

Moreover, we have methods that are only available in some ways.