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

acModal is a light javascript library for creating custom alert dialog in web development. It can show warning message to users with a friendly way. In this tutorial, we will implement acustom alert dialog with some steps using acModal.

Create a javascript alert window using acModal

View custom dialog demo

How to create a web alert 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.alert({
      title: 'This is the title of the alert modal',
      message: 'This is an alert modal, you can put either a long text or a short one it\'s free ;)',
      buttonCallBack: function () {
        console.log('You have clicked on OK');
      },
    });
  });
</script>

Parameters explain:

title: the title of alert dialog

message: the warning message be showed in this dialog

buttonCallBack: a function that will be triggered when ok button is clicked

Leave a Reply

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