v1.0.2 — Now Available

Alerts that
actually look good.

A simple, beautiful, responsive drop-in replacement for JavaScript's boring alert(). One function call, zero dependencies.

Get Started
50K+ downloads | 5 icon types | 0 dependencies | 100% customizable

AlertBox makes popup messages easy and pretty.

normal alert
alert('Hello World!');
❌ Boring
VS
alertbox
alertbox.render({
  alertIcon: 'success',
  title: 'Thank You!',
  message: 'AlertBox Popup Message',
  btnTitle: 'Ok',
  themeColor: '#7C6FFF',
  btnColor: '#C6FF4E',
  border: true
});
✨ Beautiful

See it in action.

Use Icons.

Five built-in icon types to match every situation.

alertbox.render({
  alertIcon: 'success',
  title: 'Thank You!',
  message: 'AlertBox Popup Message',
  btnTitle: 'Ok',
  border: true
});
success
alertbox.render({
  alertIcon: 'error',
  title: 'Oops!',
  message: 'AlertBox Popup Message',
  btnTitle: 'Ok',
  border: true
});
error
alertbox.render({
  alertIcon: 'warning',
  title: 'Careful!',
  message: 'AlertBox Popup Message',
  btnTitle: 'Ok',
  border: true
});
warning
alertbox.render({
  alertIcon: 'info',
  title: 'Info',
  message: 'AlertBox Popup Message',
  btnTitle: 'Ok',
  border: true
});
info
alertbox.render({
  alertIcon: 'question',
  title: 'Are you sure?',
  message: 'AlertBox Popup Message',
  btnTitle: 'Ok',
  border: true
});
question

How to install.

Three steps — done in under a minute.

01

Add this <script> tag to your HTML footer

<script src="https://cdn.jsdelivr.net/gh/noumanqamar450/alertbox@main/version/1.0.2/alertbox.min.js"></script>
02

Basic AlertBox function call

alertbox.render({
  alertIcon: 'question',
  title: 'Thank You!',
  message: 'AlertBox Popup Message',
  btnTitle: 'Ok',
  themeColor: '#000000',
  btnColor: '#7CFC00',
  border: true
});
03

Custom theme colour

alertbox.render({
  alertIcon: 'success',
  title: 'Thank You!',
  message: 'AlertBox Popup Message',
  btnTitle: 'Ok',
  themeColor: '#000000'
});

Custom button colour

alertbox.render({
  alertIcon: 'success',
  title: 'Thank You!',
  message: 'AlertBox Popup Message',
  btnTitle: 'Ok',
  themeColor: '#000000',
  btnColor: '#7CFC00'
});

Enable border (default is false)

alertbox.render({
  alertIcon: 'success',
  title: 'Thank You!',
  message: 'AlertBox Popup Message',
  btnTitle: 'Ok',
  themeColor: '#000000',
  btnColor: '#7CFC00',
  border: true
});

I need Help ☕

Has AlertBox helped you build something amazing? Show your support with a small donation — it keeps this project alive and growing.

Buy Me A Book
Clipboard Copied!