ALERTS
It is possible to create a feedback to users with style! There are multiple alert boxes defined in JTB_MD.
Examples
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>
Links inside alerts
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>
Full content
You can also include more elements inside the jtbAlerts.
Congrats!
There is a celebration!
Copy
<div class='jtbAlert jtbAlertGreen'>
<h4>Congats!</h4>
<hr>
<p>There is a celebration!</p>
</div>
Dissmissable
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 behaviour
Initializing
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.
Methods
You can use the jtbAlert methods to make the alert perform an action.
Show
If you want to make a spesific alert visible, you can easily call the jtbAlert function with parameter show.
Copy
$('#alertID').jtbAlert('show')
Hide
If you want to make a spesific alert invisible, you can easily call the jtbAlert function with parameter hide.
Copy
$('#alertID').jtbAlert('hide')
Toggle visibility
If you want to change a spesific alert's visibility, you can easily call the jtbAlert function with parameter toggle.
Copy
$('#alertID').jtbAlert('toggle')
Destroy
If you want to destroy a spesific alert, you can easily call the jtbAlert function with parameter destroy.
Copy
$('#alertID').jtbAlert('destroy')