It is possible to create a feedback to users with style! There are multiple alert boxes defined in JTB_MD.
jtbAlerts are available for any length of text, as well as an optional dismiss button. To make an element jtbAlert, simply add .jtbAlert
class to it. For proper styling, use one of the following.
Copy
<div class='jtbAlert jtbAlertBlue'>Hi! I'm an alert box!</div>
<div class='jtbAlert jtbAlertGray'>Hi! I'm an alert box!</div>
<div class='jtbAlert jtbAlertGreen'>Hi! I'm an alert box!</div>
<div class='jtbAlert jtbAlertRed'>Hi! I'm an alert box!</div>
<div class='jtbAlert jtbAlertYellow'>Hi! I'm an alert box!</div>
<div class='jtbAlert jtbAlertOrange'>Hi! I'm an alert box!</div>
The links inside alerts will be bold and related color.
Copy
<div class='jtbAlert jtbAlertBlue'>Hi! I'm an alert box <a href='#'>Link</a>!</div>
<div class='jtbAlert jtbAlertGray'>Hi! I'm an alert box <a href='#'>Link</a>!</div>
<div class='jtbAlert jtbAlertGreen'>Hi! I'm an alert box <a href='#'>Link</a>!</div>
<div class='jtbAlert jtbAlertRed'>Hi! I'm an alert box <a href='#'>Link</a>!</div>
<div class='jtbAlert jtbAlertYellow'>Hi! I'm an alert box <a href='#'>Link</a>!</div>
<div class='jtbAlert jtbAlertOrange'>Hi! I'm an alert box <a href='#'>Link</a>!</div>
You can also include more elements inside the jtbAlerts.
There is a celebration!
Copy
<div class='jtbAlert jtbAlertGreen'>
<h4>Congats!</h4>
<hr>
<p>There is a celebration!</p>
</div>
It is possible to create a dissmissable alert too. Just add .jtbAlertDissmissable
class to your alert and, a closing button with .closeBtn
class.
Copy
<div class='jtbAlert jtbAlertGreen jtbAlertDissmissable'>
<button class='closeBtn'><i class='jtb-close'></i></button>
Hello!
</div>
Javascript behaivours of jtbAlerts has been written in alert.js plugin of jtb_md.js. To avoid any problematic behaviour on alerts; do not remove this plugin manually.
You can use the jtbAlert methods to make the alert perform an action.
If you want to make a spesific alert visible, you can easily call the jtbAlert function with parameter show.
Copy
$('#alertID').jtbAlert('show')
If you want to make a spesific alert invisible, you can easily call the jtbAlert function with parameter hide.
Copy
$('#alertID').jtbAlert('hide')
If you want to change a spesific alert's visibility, you can easily call the jtbAlert function with parameter toggle.
Copy
$('#alertID').jtbAlert('toggle')
If you want to destroy a spesific alert, you can easily call the jtbAlert function with parameter destroy.
Copy
$('#alertID').jtbAlert('destroy')