Create Windows-like 🪟 message boxes 💬 for your website


<script src="[email protected]/src/windowsMessageBox.min.js"></script>


This repo provides a simple example of usage of the library : example.html

Double click on the page to open a message box

Usage 📝

This library provides 2 functions:

  • windowsMessageBox.init()


This function initializes the library.

It will be called automatically if the library is not initialized when calling the function.

This function creates a message box.

It takes 5 parameters:

It returns a promise that resolves when the user clicks on a button/closes the message box.

Example 📝

Title & Message

The title will be displayed in the top of the message box and the message will be displayed in the middle of the message box."This is my title!", "This is my message!");


The type defines the icon and the sound of the message box.

  • "info"
  • "error"
  • "warning"

Type -> info"This is my title!", "This is an information message!", "info");

Type -> warning"This is my title!", "This is a warning message!", "warning");

Type -> error"This is my title!", "This is an error message!", "error");


This parameter defines the buttons of the message box.


let buttons = [

let clicked  ="This is my title!", "This is my message!", "info", buttons);

console.log(clicked); // "Yes" if the user clicked on the "Yes" button, "No" if the user clicked on the "No" button

You can also define the value returned depending on the button clicked.

If we want the button hello to return true and the button world to return false, we can do it like this:

let buttons = [
    ["hello", true],
    ["world", false]


This parameter defines the position of the message box.

It can be:

  • [x, y] : pop up the message box at the given position
  • "random" : pop up the message box at a random position on the page


If you have any problem, don’t hesitate to open an issue


Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.


View Github