Responsive Message Box with JavaScript Class

Responsive Message Box with JavaScript Class

This Message Box implementation in JavaScript, inspired by material design's toast message.

I used native JavaScript Class to implement the message box. This may not work with older browsers due to compatibility issue with compatibility with native JavaScript class.

The toast message will appear at the top right corner of the screen if the width of the screen is 768 pixels and above. Otherwise, the toast message will appear at the bottom center of the screen.

Usage

Create MessageBox class instance:

let msg = new MessageBox("#id", option)

Available options (type: Object):

const option = {
  // number: Count in milliseconds before closing the message box
  closeTime: 1000,
  // bool: Flag if the close button (or label) will be hidden for click
  hideCloseButton: false,
}

Call the "show" method to show the dialog box.

msg.show(
  "This is the message that will appear on the message box",
  () => {
    alert("This will be called after the message box is completely hidden");
  },
  "This is the close button"
);