Alert/Confirm Popup Boxes Using Bootstrap 4 - boot4alert
| File Size: | 6.33 KB |
|---|---|
| Views Total: | 7224 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Yet another jQuery/Bootstrap dialog box plugin used to replace the native alert and confirmation popup boxes using Bootstrap 4 modal component.
Utral lightweight yet fully customizable via your own CSS & CSS3 rules.
How to use it:
1. Load the required jQuery library and Bootstrap 4 framework in the document.
<!-- 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> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
2. Load the boot4alert.js in the document.
<script src="boot4alert.js"></script>
3. Create a basic alert dialog box. Possble parameters:
- Alert message.
- Button text.
boot4.alert("Hello World!", "OK");
4. Create a custom alert dialog box.
boot4.alert({
msg: "Alert Message",
title: "Alert",
style: {
// CSS styles here
},
callback: function() {
// do something
}
}, "OK");
5. Create a confiramtion dialog with confirm/cancel callback functions.
boot4.confirm({
msg: "Confirm Message",
title: "Confirm",
callback: function(result) {
if(result){
alert('Confirmed')
}
else{
console.log("cancel");
}
}
});
This awesome jQuery plugin is developed by fixxyzeal. For more Advanced Usages, please check the demo page or visit the official website.











