MODALS

Add dialogs to your design and make it more interactive!

How to

jtbModals are so powerful yet so easy to use! There are two main parts of this component, the trigger and modal itself. To create a modal; you need to create any element with attribute jtbModal points to the desired modal's id.

			Copy
			<!-- Trigger -->
<button jtbModal='modal-1' class='jtbButton jtbButtonBlue jtbButton_sm'>Open modal</button>

<!-- Modal -->
<div class='jtbModal' id='modal-1'>
	<div class='jtbModalContent'>
		<div class='jtbModalHeader'>
			<h2>Hello!</h2>
			<i class='jtb-close'></i>
		</div>
		<div class='jtbModalBody'>
			<p>I'm a modal!</p>
		</div>
	</div>
</div>
		

Modal components

There are three main parts of the modal: .jtbModalHeader, .jtbModalBody, .jtbModalFooter. All three have different attributes and styling and need to be covered with .jtbModalContent. Once you create the modal, it is not possible to dissmiss with clickin outside of it, so to dismiss you need to integrate the <i class="jtb-close"></i> (x icon) on the modal's header.

			Copy
			<!-- Trigger -->
<button jtbModal='modal-2' class='jtbButton jtbButtonBlue jtbButton_sm'>Open modal</button>

<!-- Modal -->
<div class='jtbModal' id='modal-2'>
	<div class='jtbModalContent'>
		<div class='jtbModalHeader'>
			<h2>I'm header!</h2>
			<i class='jtb-close'></i>
		</div>
		<div class='jtbModalBody'>
			<p>I'm body!</p>
		</div>
		<div class='jtbModalFooter'>
			<p>I'm footer!</p>
		</div>
	</div>
</div>
		

Closing options

It is possible to close the modal via javascript too. Just need to add following:

			Copy
			<!-- Trigger -->
<button jtbModal='modal-2' class='jtbButton jtbButtonBlue jtbButton_sm'>Open modal</button>

<!-- Modal -->
<div class='jtbModal' id='modal-2'>
	<div class='jtbModalContent'>
		<div class='jtbModalHeader'>
			<h2>I'm header!</h2>
			<i class='jtb-close'></i>
		</div>
		<div class='jtbModalBody'>
			<p>I'm body!</p>
		</div>
		<div class='jtbModalFooter'>
			<button class='jtbButton jtbButton_xs jtbButtonRed' onclick="$('#modal-3').jtbModal('hide')">Close modal</button>
		</div>
	</div>
</div>
		

Modal sytles

There are four different modal types in JTB_MD. You can use one of them basing on your purpose: .jtbModalTop | .jtbModalRight | .jtbModalBottom | .jtbModalLeft

			Copy
			<!-- Trigger -->
<button jtbModal='modal-top' class='jtbButton jtbButtonBlue jtbButton_sm'>Top modal</button>
<button jtbModal='modal-right' class='jtbButton jtbButtonBlue jtbButton_sm'>Right modal</button>
<button jtbModal='modal-bottom' class='jtbButton jtbButtonBlue jtbButton_sm'>Bottom modal</button>
<button jtbModal='modal-left' class='jtbButton jtbButtonBlue jtbButton_sm'>Left modal</button>

<!-- Top Modal -->
<div class='jtbModal' id='modal-top'>
	<div class='jtbModalContent'>
		<div class='jtbModalHeader'>
			<h2>Top modal!</h2>
			<i class='jtb-close'></i>
		</div>
		<div class='jtbModalBody'>
			<p>This is top modal</p>
		</div>
	</div>
</div>

<!-- Right Modal -->
<div class='jtbModal jtbModalRight' id='modal-right'>
	<div class='jtbModalContent'>
		<div class='jtbModalHeader'>
			<h2>Right modal!</h2>
			<i class='jtb-close'></i>
		</div>
		<div class='jtbModalBody'>
			<p>This is right modal</p>
		</div>
	</div>
</div>

<!-- Bottom Modal -->
<div class='jtbModal jtbModalBottom' id='modal-bottom'>
	<div class='jtbModalContent'>
		<div class='jtbModalHeader'>
			<h2>Bottom modal!</h2>
			<i class='jtb-close'></i>
		</div>
		<div class='jtbModalBody'>
			<p>This is bottom modal</p>
		</div>
	</div>
</div>

<!-- Left Modal -->
<div class='jtbModal jtbModalLeft' id='modal-left'>
	<div class='jtbModalContent'>
		<div class='jtbModalHeader'>
			<h2>Left modal!</h2>
			<i class='jtb-close'></i>
		</div>
		<div class='jtbModalBody'>
			<p>This is left modal</p>
		</div>
	</div>
</div>
		

Javascript behaviour

Initializing

Javascript behaivours of jtbModals has been written in modal.js plugin of jtb_md.js. To avoid any problematic behaviour on modals; do not remove this plugin manually.

Methods

You can use the jtbModal methods to make the modal perform an action.

Show

If you want to make a spesific modal visible, you can easily call the jtbModal function with parameter show.

				Copy
				$('#modalID').jtbModal('show')
			

Hide

If you want to make a spesific modal invisible, you can easily call the jtbModal function with parameter hide.

				Copy
				$('#modalID').jtbModal('hide')
			

Toggle visibility

If you want to change a spesific modal's visibility, you can easily call the jtbModal function with parameter toggle.

				Copy
				$('#modalID').jtbModal('toggle')