Step-by-step Guide to Create a Confirm Dialog in JavaScript: acModal for Beginners

acModal is a simple javascript library for creating custom confirm dialog in web development. It provides a friendly way to interact with users. In this tutorial, we will implement acustom confirm dialog with some steps using acModal.

Create a javascript confirm dialog using acModal

View custom confirm dialog demo

How to create a web confirm dialog uing acModal?

1.Create a button to trigger an event

<button id="button">Click me</button>

2.Import acModal index.js

<script src="index.js"></script>

3.Bind an event on a html button

<script>
  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 OK');
      },
      cancelCallBack: function () {
        console.log('You have clicked on Cancel');
      },
    });
  });
</script>

Parameters explain:

title: the title of confirm dialog

message: the warning message be showed in this confirm dialog

successCallBack: a function that will be triggered when OK button is clicked

cancelCallBack: a function that will be triggered when Cancel button is clicked

Leave a Reply

Your email address will not be published. Required fields are marked *