windowsmessagebox
v0.4.1
Published
Create Windows-like message boxes for your website
Downloads
21
Maintainers
Readme
WindowsMessageBox.js
Create Windows-like 🪟 message boxes 💬 for your website
jsDelivr
<script src="https://cdn.jsdelivr.net/gh/SkwalExe/[email protected]/dist/windowsMessageBox.min.js"></script>
NPM module
Install the npm module
npm install windowsmessagebox
And import it in your project
const MessageBox = require('windowsmessagebox');
⚠️ You will need to bundle the package with your application (for example with browserify) because this library only works in the browser
browserify index.js -o bundle.js
Setting up
You can import the library into you website with JsDelivr or, you can use the npm module and import it in your project.
You also need to import the css file to your website
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/wmsgbox.min.css">
Warning 🚨
Versions below v0.3.0
contains a lot of errors and are not properly working, consider using v0.3.0
or higher, the function names are the same and you don't need to change your code.
Example
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 one function : windowsMessageBox.show()
windowsMessageBox.show()
This function creates a message box.
It takes 5 parameters:
title
: The title of the message box.message
: The message of the message box.type
: The type of the message box, can bebuttons
: The buttons of the message boxposition
: The position of the message box
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.
windowsMessageBox.show("This is my title!", "This is my message!");
Type
The type defines the icon and the sound of the message box.
"info"
"error"
"warning"
Type -> info
windowsMessageBox.show("This is my title!", "This is an information message!", "info");
Type -> warning
windowsMessageBox.show("This is my title!", "This is a warning message!", "warning");
Type -> error
windowsMessageBox.show("This is my title!", "This is an error message!", "error");
Buttons
This parameter defines the buttons of the message box.
Example
let buttons = [
["Yes"],
["No"]
]
let clicked = windowsMessageBox.show("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]
]
Position
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
final
If you have any problem, don't hesitate to open an issue
contributing
Start by forking this repository
Then clone your fork to your local machine.
git clone https://github.com/your-username/windowsMessageBox.js.git
- Install dev dependencies
npm install --save-dev
- Create a new branch
git checkout -b super-cool-feature
Then make your changes
Update the changelog and version number if needed (using Semantic Versioning) also, update the version number in the JsDelivr links (js and css)
# bug fix
npm version patch --no-git-tag-version
# add a new feature
npm version minor --no-git-tag-version
# changes that break backwards compatibility
npm version major --no-git-tag-version
- List and correct linting errors
npm run lint
- Update the minified/browser version of the library
npm run build
- Once you're done, commit your changes and push them to the remote repository.
git add --all
git commit -m "Add super-cool-feature"
git push origin super-cool-feature
- Then, open a pull request on GitHub from your fork.
- Go to this link
- Click compare across forks
- On the right, on
head repository
select your fork - And on
compare
select the branch you just created - Click on
Create Pull Request
and submit your pull request