Elevate user experience with sleek and responsive dialog boxes in JTB_MD.
Modals in JTB_MD are dynamic dialog boxes designed to showcase content in an engaging and responsive manner. Whether you want to display images, forms, or other interactive elements, the modal elements provide a sophisticated solution for enhancing user interactions.
Modals in JTB_MD are content containers strategically designed for space efficiency. By default, they remain hidden during the page initialization to provide space-efficiency for your projects. To create and use modals, you need to initialize two main components of it:
Creating a modal container in JTB_MD is a straightforward process. Start by creating an element with the .jtbModal class, which is an element that responsible for taking care of backdrops and content positioning. Once the modal is created, add your desired content by creating a .jtbModal-content element within the modal structure.
To associate your modal with a trigger, simply include the jtbModal attribute into the trigger element, specifying the id of your modal.
<!-- Trigger -->
<button jtbModal='modal-1' class='jtbButton'>Open modal</button>
<!-- Example modal -->
<div class='jtbModal' id='modal-1'>
<div class='jtbModal-content'>
Hello! this is an example modal!
</div>
</div>
As you can see from the example modal, by default, the .jtbModal-content element has no initial styles by itself. It is just a container with position attributes and animations. To make your modal make sense you need to add one of its sub-components: header | body | footer:
The Header is the top area of modals which states the title and other important stuff for it. To incorporate a header area into modal card, add an element with the .jtbModal-header class within your content area.
<!-- Modal with header element -->
<div class='jtbModal'>
<div class='jtbModal-content'>
<div class='jtbModal-header'>Header!</div>
</div>
</div>
The Body is the main content area of modals that holds the information you want to display to your users.
To incorporate a body into your modal, add an element with the .jtbModal-body class within your content area.
<!-- Modal with header & body element -->
<div class='jtbModal'>
<div class='jtbModal-content'>
<div class='jtbModal-header'>...</div>
<div class='jtbModal-body'>This is content area!</div>
</div>
</div>
The Footer is the content area of modals that holds additional information you want to display to your users such as action buttons.
To incorporate a footer into your modal, add an element with the .jtbModal-footer class within your content area.
<!-- Modal with header & body element -->
<div class='jtbModal'>
<div class='jtbModal-content'>
<div class='jtbModal-header'>...</div>
<div class='jtbModal-body'>...</div>
<div class='jtbModal-footer'>...</div>
</div>
</div>
As you can see from the examples above, closing a modal in JTB_MD can be achieved through two methods:
To make your disable these features of the modal, simply add the .jtbModal-stayopen class to your .jtbModal element. However, keep in mind that you must provide an alternative method for users to close the modal, which will be covered in later sections of this page.
<!-- Non-closable modal -->
<div class='jtbModal jtbModal-stayopen'>
...
</div>
By default the modals are programmed to prevent overlfow of content in any of screens. So to prevent it you need to do anything. The library automatically handles that.
<!-- Non-closable modal -->
<div class='jtbModal'>
...
</div>
Unlike traditional modals, in JTB_MD modals are elements that are combination of modals and drawers which allows you to make your modal to stick an edge of the screen if you want.
To position a modal in the screen, you can use the position attribute of your .jtbModal element. Possible values are the first letter of edges: T | R | B | L where T for top, R for right, B for bottom, or L for left.
<!-- Stick to edge (Top)-->
<div class='jtbModal' position='T'>
...
</div>
In JTB_MD there are several classes defined for modals that aim to make your elements more inline with your projects.
If you want to make your modal containers bigger or smaller than default you can resize them via adding one of pre-defined sizing classes of modals into your .jtbModal elements.
.jtbModal-[ xs | sm | md | lg | xl ]
<!-- Example modal (size = xs) -->
<div class='jtbModal jtbModal-xs'>
...
</div>
width of modal elements, they do not affect the top and bottom positioned modals.To create a borderless modal element, simply apply the .jtbModal-borderless class.
<!-- Borderless Modal -->
<div class='jtbModal jtbModal-borderless'>
...
</div>
To create a rectangular modal (with no border radius), apply the .jtbModal-rect class to your modal element.
<!-- Rectangular Modal -->
<div class='jtbModal jtbModal-rect'>
...
</div>
In JTB_MD, the actions and methods that modals can perform are defined in the jtbModal plugin. Ensure that you haven't manually removed it from your project to utilize its functionalities properly.
If you do not want to depend on default trigger of modals and want to trigger the methods manually, you can do it by calling jtbModal plugin at any time. Here are the defined methods to modals in the plugin of modals.
To make a specific modal visible on your DOM, you can invoke the plugin with the "show" parameter. You can trigger the method as: $(modal).jtbModal('show', callbackFunction); where:
$(modal) represents the modal element that you want to make visible,callbackFunction (optional) stands for the function that you want to call after the visibility fully changed.
/*----- To Show a modal on -----*/
$("#modalID").jtbModal("show");
To hide a specific modal on your DOM, utilize the jtbModal() function with the "hide" parameter. You can trigger the method as: $(modal).jtbModal('hide', callbackFunction); where:
$(modal) represents the modal element that you want to make hidden,callbackFunction (optional) stands for the function that you want to call after the visibility fully changed.
/*----- To Hide modals -----*/
$("#modalID").jtbModal("hide");
To toggle visibility of a specific modal on your DOM (hide if visible and make it visible if hidden), utilize the jtbModal() function with the "toggle" parameter. You can trigger the method as: $(modal).jtbModal('toggle', callbackFunction); where:
$(modal) represents the modal element that you want to toggle visibility,callbackFunction (optional) stands for the function that you want to call after the visibility fully changed.
/*----- To Change visibility of modal -----*/
$("#modalID").jtbModal("toggle");
Throughout the process of calling methods of modals via the plugin, you can execute additional functions after the operation by providing additional parameter to the jtbModal() function.
The jtbModal plugin offers three ways to specify a callback function:
jtbModal().
/*----- Toggle Modal and callback -----*/
$("#modalID").jtbModal("toggle", showProcessDone);
/*------ Define showProcessDone in here -------*/
function showProcessDone(){
alert('Process done boss.');
}
jtbModal().
/*----- Toggle Modal and callback -----*/
$("#modalID").jtbModal("toggle", function(){
alert('Process done, boss.');
});
/*----- Define callbacks as attrributes -----*/
<div class='jtbModal' onShow='onShow();' onHide='onHide();' onToggle='onToggle();'>
...
</div>
Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.
Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.
Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.
Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.
Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.
Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.
Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.
Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.
Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.
Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.
Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.
Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.
Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.
Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.
Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.
Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.
Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.
Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.
Content goes here. Content goes here. Content goes here.
Content goes here. Content goes here. Content goes here.
Content goes here. Content goes here. Content goes here.
Content goes here. Content goes here. Content goes here.
Content goes here. Content goes here. Content goes here.
You can hide the modal with button below.
You can toggle the modal with button below.
.jtbModal-xs class..jtbModal-sm class..jtbModal-md class..jtbModal-lg class..jtbModal-xl class.Copyright © 2024 JTBLabs - All rights reserved.