README.md

acModal

A very simple lightweight responsive javascript library to make custom confirm() and alert() acModal is very easy to use here is a basic example for an alert modal:

Demo

Alert modal Confirm modal

Install it

With npm:

Run this command in your project

npm install --save-dev ac-modal

And then:

const acModal = require('ac-modal');

Inline

Or you can add it with a script tag, download the file build/index.js and then:

<script src="https://yourwebsite.com/path/to/index.js"></script>

Make an alert modal

//on element click show an alert modal
document.getElementById('button').addEventListener('click', function () {
    acModal.alert({
        message: 'This is an alert page', //the message to display
        buttonCallBack: function () { //the function on the click of the OK button
            console.log('You have clicked on OK');
        },
    });
});

Parameters

Name	type	required
title	string	false
message	string	true
buttonCallBack	function	false
buttonText	string	false default: OK
appendTo	string	false (query selector)

Make a confirm modal

//on element click show a confirm modal
document.getElementById('button').addEventListener('click', function () {
    acModal.confirm({
        title: 'Hi I am a title',
        message: 'Do you want to add some lorem ispum in page?',
        successCallBack: function () {
            console.log('You have clicked on the success button');
        },
        cancelCallBack: function () {
            console.log('You have clicked on the cancel button');
        },
    });
});

Parameters

Name	type	required
title	string	false
message	string	true
successCallBack	function	false
successText	string	false default: OK
cancelCallBack	function	false
cancelText	string	false default: Cancel
appendTo	string	false (query selector)

For development

After you've clone the repository first run:

npm install

Then to run webpack:

npm run dev