Bootstrap 4 Custom Alert & Confirm Popup with jQuery

Free jQuery plugin for Bootstrap 4 Custom Alert & Confirm Popup. The plugin allow you to create alert popup or confirm message with Bootstrap 4 modals.

Plugin Overview

Plugin: boot4alert.js
Author: Chanchai jeimvijack
Licence: MIT Licence
Published: January 11, 2024
Official Website: Go to website
Dependencies: jQuery 3.3.1 and Bootstrap 4.2
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 6.7 KB

How to Use Bootstrap 4 Custom Alert :

1. Load the necessary jQuery and Bootstrap files into the HTML page.

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

<!-- 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>

2. After that, include the plugin’s JavaScript file in your website.

<script src="boot4alert.js"></script>

3. To create a basic alert box use the following syntax.

boot4.alert("Hello World!", "OK");

4. To create the alert message with callback function:

boot4.confirm({
   msg: "Confirm Message",
   title: "Confirm",
   callback: function(result) {
  if(result){
     alert('Confirmed')
   }
  else{
    console.log("cancel");
   }
 }
});

5. To create alert popup modal with custom design and with callback function:

boot4.alert({
   msg: "Alert Message",
   title: "Alert",
   style: {
     // CSS styles here
  },
   callback: function() {
     // do something
}
}, "OK");

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...