This time I will share jQuery Plugin and tutorial about Create Alert & Confirm Dialog Boxes Using Bootstrap 4 Modal Component, hope it will help you in programming stack.
| File Size: | 6.72 KB |
|---|---|
| Views Total: | 516 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
“
Just another jQuery wrapper for Bootstrap 4 modal component that makes it simple to create alert notifications and confirmation dialog boxes on your web app.
How to use it:
1. Import the main JavaScript file modal.js into your Bootstrap 4 project.
1 |
<!-- Bootstrap 4 Stylesheet --> |
2 |
<link rel="stylesheet" href="/path/to/bootstrap.min.css"> |
3 |
<!-- jQuery & Bootstrap JS --> |
4 |
<script src="/path/to/jquery.slim.min.js"></script> |
5 |
<script src="/path/to/popper.min.js"></script> |
6 |
<script src="/path/to/bootstrap.min.js"></script> |
7 |
<!-- <a href="https://www.jqueryscript.net/tags.php?/Modal/">Modal</a> Wrapper --> |
8 |
<script src="modal.js"></script> |
2. Create an alert popup with or without title & content. All possible alert types:
- info
- success
- warning
- error
01 |
$.modal({ |
02 |
type: "error", |
03 |
title: "Alert Title", |
04 |
content: "Alert Content" |
05 |
}); |
06 |
07 |
// without content |
08 |
$.modal({ |
09 |
type: "error", |
10 |
title: "Alert Title" |
11 |
}); |
12 |
13 |
// without title |
14 |
$.modal({ |
15 |
type: "error", |
16 |
content: "Alert Content" |
17 |
}); |
3. Create a confiramtion dialog using custom buttons.
01 |
$.modal({ |
02 |
type: "error", |
03 |
title: "Confirm Title", |
04 |
content: "Confirm Content", |
05 |
buttons: [ |
06 |
{ |
07 |
type: "button", // or 'submit' |
08 |
label: "Okay", |
09 |
callback: function () { |
10 |
alert("You just clicked me"); |
11 |
} |
12 |
}, |
13 |
{ |
14 |
type: "dismiss", // dismiss will hide the modal |
15 |
label: "Close" |
16 |
} |
17 |
] |
18 |
}); |
4. Adjust the modal size.
1 |
$.modal({ |
2 |
type: "error", |
3 |
title: "Alert Title", |
4 |
size: "" // "sm", "lg", "xl" |
5 |
}); |
This awesome jQuery plugin is developed by Script47. For more Advanced Usages, please check the demo page or visit the official website.
source : jquery.net
