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.

Hi! I'm an alert box!
Hi! I'm an alert box!
Hi! I'm an alert box!
Hi! I'm an alert box!
Hi! I'm an alert box!
Hi! I'm an alert box!
			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.

Hi! I'm an alert box Link!
Hi! I'm an alert box Link!
Hi! I'm an alert box Link!
Hi! I'm an alert box Link!
Hi! I'm an alert box Link!
Hi! I'm an alert box Link!
			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.

Hello!
			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')