Vanilla JS Responsive Message Box with Javascript Class

#codepen #javascript #design #showdev

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:

Create MessageBox class instance: let msg = new MessageBox("#id", option)
Available options (type: Object): a. closeTime // Time before the message box closes (In milliseconds). 0 for persistent b. hideCloseButton // To hide the close button.
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

Top comments (0)

CREATE Dynamic Pagination in JUST 20 Minutes with HTML, CSS and JavaScript!

sharathchandark - Jan 4

The New React Native Architecture 🚀

João Alisson - Dec 16 '24

Why EchoAPI is a Better Choice Than Postman for Your API Needs

Velan<> - Dec 12 '24

Lessons Learned Migrating from React CRA & Jest to Vite & Vitest

Desmond Chin - Dec 16 '24

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

DEV Community