Custom Alert for Bootstrap 4

1. Introduction

boot4alert is a jQuery plugin designed to create Bootstrap 4 modals on demand. This plugin is very light and easy to use. boot4alert can be used to create an alert or confirm message with Bootstrap 4 modals. We can provide the title and content of the popup, programmatically in JavaScript code.

Light javascript library for bootstrap4 modals

2. Plugin Overview

Library	boot4alert.js
Author	Chanchai jeimvijack
Licence	MIT Licence
Repository	GitHub
Dependencies	jQuery 3.3.1 and Bootstrap 4.2

Demo

3. How to install and use boot4alert jQuery plugin

Follow these steps in order to install boot4alert jQuery plugin.

1. Load jQuery library into your HTML page:

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

2. Include all Bootstrap 4 assets (CSS file and JavaScript):

<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

3. Include boot4alert script:

<!-- Boot4Alert JS -->
<script src="boot4alert.js"></script>

boot4.alert({
      msg: "Call Back",
      title: "Test Callback",
      callback: function() {
        console.log("callback");
      }
},"OK");

for confirmation popup use boot4.confirm() method:

$("#confirm").on('click',function(){
     boot4.confirm({
    msg: "Yet another jQuery/Bootstrap dialog box plugin used to replace the native alert and confirmation popup boxes using Bootstrap 4 modal component.",
    title: "Confirm Message",
    callback: function(result) {
      if (result) {
          alert('Confirmed') 
      } else {
          console.log("cancel");
      }
    }
  });
  });

4. Conclusion

In this article, we focused on boot4alert jQuery plugin that lets you open bootstrap modal programmatically with title and content provided in JavaScript code. This library should be useful in dynamic web applications where modal content is not constant.