Custom Alert/Confirm/Prompt Popup Box JavaScript Library – attention.js

Category: Javascript | March 19, 2019
Author: janmarkuslanger
Views Total: 371
Official Page: Go to website
Last Update: March 19, 2019
License: MIT

Preview:

Custom Alert/Confirm/Prompt Popup Box JavaScript Library – attention.js

Description:

attention.js is a vanilla JavaScript plugin used for creating custom alert, confirm or prompt dialog boxes on the page.

How to use it:

To use this plugin include the following files on the page.

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

Create an alert dialog.

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

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');
    }
});

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)
    }
});

More callback functions.

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

You Might Be Interested In:


Leave a Reply