Bootstrap 4 Custom Alert & Confirm Popup with jQuery boot4alert.js

Yet another jQuery/Bootstrap dialog box plugin used to replace the native alert and confirmation popup boxes using Bootstrap 4 modal component.

The plugin “boot4alert.js” is easy to use and light weight Javascript (jQuery) plugin that allow you to create alert or confirm message with Bootstrap 4 modals.

Plugin Preview

How to start using jQuery?

More jQuery Top, Best and New Plugins

Plugin Overview

Plugin: boot4alert.js
Author: Chanchai jeimvijack
Licence: MIT Licence
Published: 2019-02-13 07:40:13
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 it:

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

<!-- Bootstrap Stylesheet -->
 	 	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<!-- Bootstrap JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

2. Load the plugin script 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:

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

Leave a Reply

Your email address will not be published.


*