DEV Community

loading...

Vanilla JS Responsive Message Box with Javascript Class

takaneichinose profile image Takane Ichinose ・1 min read

This Message Box is inspired by material design's toast message.

I used the VanillaJS (native Javascript) Class to implement the message box. This may not work on older browsers, due to compatibility issue with native class.

Usage:

  1. Create MessageBox class instance: let msg = new MessageBox("#id", option)
  2. Available options (type: Object): a. closeTime // Time before the message box closes (In milliseconds). 0 for persistent b. hideCloseButton // To hide the close button.
  3. Call the "show" method to show the dialog box. Params: message // The message that will appear on the message box label // The label of the close button (default is "CLOSE"). callback // Callback function

Discussion

pic
Editor guide