A simple, beautiful, responsive, easy to use, customizable text for JavaScript’s Alert Box.

AlertBox makes popup messages easy and pretty.

NORMAL ALERT

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

Demo

Use Icons

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

How to install


  • This tag will be used in the footer.
    • <script src="https://cdn.jsdelivr.net/gh/noumanqamar450/alertbox@main/version/1.0.2/alertbox.min.js"></script>

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

  • If you want a custom alert theme colour, then you add this code
    • alertbox.render({
     alertIcon: 'success',
     title: 'Thank You!',
     message: 'AlertBox Popup Message',
     btnTitle: 'Ok',
     themeColor: '#000000'
    });

  • If you want a custom button colour, then you add this code
    • alertbox.render({
     alertIcon: 'success',
     title: 'Thank You!',
     message: 'AlertBox Popup Message',
     btnTitle: 'Ok',
     themeColor: '#000000',
     btnColor: '#7CFC00'
    });

  • If you want border, then you add this code. Otherwise, the border will be false.
    • alertbox.render({
     alertIcon: 'success',
     title: 'Thank You!',
     message: 'AlertBox Popup Message',
     btnTitle: 'Ok',
     themeColor: '#000000',
     btnColor: '#7CFC00',
     border:true
    });

    I need Help

    Has helped you create an amazing application?

    You can show your support by making a donation:

    Buy Me A Book

    Github

    Hand-crafted with by Muhammad Nouman Qamar

    Clipboard Copied!

    Oops, Unable to copy it!