This is a notification system when I click on button it will appear a notification. My button code is
<h5 class="mb-4">Bootstrap Notify</h5>
<a href="#" class="btn btn-outline-primary rounded notify-btn mb-1" data-from="top" data-align="left">Top Left</a>
onclick on this jquery script was working.
$("body").on("click", ".notify-btn", (function (e) {
var t, a, n;
e.preventDefault(), t = $(this).data("from"), a = $(this).data("align"), n = "primary", $.notify({
title: "Bootstrap Notify",
message: "Here is a notification!",
target: "_blank"
}, {
element: "body",
position: null,
type: n,
allow_dismiss: !0,
newest_on_top: !1,
showProgressbar: !1,
placement: {
from: t,
align: a
},
offset: 20,
spacing: 10,
z_index: 1031,
delay: 4e3,
timer: 2e3,
url_target: "_blank",
mouse_over: null,
animate: {
enter: "animated fadeInDown",
exit: "animated fadeOutUp"
},
onShow: null,
onShown: null,
onClose: null,
onClosed: null,
icon_type: "class",
template: '<div data-notify="container" class="col-11 col-sm-3 alert alert-{0} " role="alert"><button type="button" aria-hidden="true" class="close" data-notify="dismiss">×</button><span data-notify="icon"></span> <span data-notify="title">{1}</span> <span data-notify="message">{2}</span><div class="progress" data-notify="progressbar"><div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div></div><a href="{3}" target="{4}" data-notify="url"></a></div>'
})
}))
This is working fine. But I need as function call system.
showNotification(msg);
and the script shoud be like
function showNotification(msg){
//code follows....
}
To do what you require define the function with the call to $.notify() and pass in the type, from and align arguments as parameters:
function showNotification(type, from, align) {
$.notify({
title: "Bootstrap Notify",
message: "Here is a notification!",
target: "_blank"
}, {
// some properties removed for brevity...
type: type,
placement: {
from: from,
align: align
}
})
}
$("body").on("click", ".notify-btn", e => {
e.preventDefault();
let $button = $(e.target);
showNotification("primary", $button.data("from"), $button.data("align"));
});