{"id":3527,"date":"2017-04-28T07:12:52","date_gmt":"2017-04-28T07:12:52","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=3527"},"modified":"2023-10-02T12:12:25","modified_gmt":"2023-10-02T12:12:25","slug":"jquery-all-in-one-solution-for-tooltips-modals-notices-galleries-jbox","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/jquery-all-in-one-solution-for-tooltips-modals-notices-galleries-jbox\/","title":{"rendered":"jQuery All-in-One solution for tooltips, modals, notices, galleries: jBox"},"content":{"rendered":"

A one stop solution for modals, tooltips, galleries etc.<\/strong><\/h3>\n

The jBox is a jQuery based plug-in that can be used for creating the tooltips, notices in different places of the web page, image galleries, and modal windows.<\/p>\n

Just include the plug-in once with its dependency JS and CSS files and start creating different components. See these demos.<\/p>\n

Modals Tooltips Notices Gallery<\/h6>\n
Developer page<\/a> Download plug-in<\/a><\/strong><\/h6>\n

Installing the jBox plug-in?<\/strong><\/h3>\n

Include the jBox.js and jBox.css files in the web pages where you want to use this plug-in. Refer the jBox.js before the body closing tag and jBox.css under the <head> tag.<\/p>\n

You also need to include the respective JS\/CSS files for the component like jBox.Notice.js, jBox.Confirm.js that depends on the component you want to use.<\/p>\n

<script src=”..\/Source\/jBox.js”><\/script><\/p>\n

<script src=”..\/Source\/plugins\/Notice\/jBox.Notice.js”><\/script><\/p>\n

<script src=”..\/Source\/plugins\/Confirm\/jBox.Confirm.js”><\/script><\/p>\n

<script src=”..\/Source\/plugins\/Image\/jBox.Image.js”><\/script><\/p><\/blockquote>\n

See the demos below for the markup and how to initiate the plug-in with complete code.<\/p>\n

A demo of creating modal windows<\/strong><\/h3>\n

In this demo of modal windows, four modals are created with different options. The first modal is a basic one. This can be closed by clicking anywhere on the screen. This modal displays only the basic message.<\/p>\n

The second modal demo is the one that can be dragged with the mouse. It can be closed by using the cross icon towards the top right cornor.<\/p>\n

The third is AJAX based modal that works on the backend. The last one is a confirm model where you can see two options.<\/p>\n

\"jQuery<\/p>\n

See online demo and code<\/strong><\/h6>\n

The markup:<\/strong><\/p>\n

<h2>A demo of Modal widnows<\/h2>\r\n\r\n\r\n\r\n<div class=\"targets-wrapper\">\r\n\r\n<div id=\"Modal-1\" class=\"target-click\">Basic Modal Demo<\/div>\r\n\r\n<div id=\"Modal-2\" class=\"target-click\">Draggable Modal<\/div>\r\n\r\n<div id=\"Modal-3\" class=\"target-click\">AJAX Modal<\/div>\r\n\r\n<div class=\"target-click\" data-confirm onclick=\"new jBox('Notice', {content: Do you want to close it?', color: 'green', attributes: {y: 'bottom'}})\">Confirm Modal<\/div>\r\n\r\n<\/div><\/pre>\n
 <\/p>\n
You can see the complete code in the demo page.<\/p>\n
A demo of creating tooltips<\/strong><\/h3>\n
In this example, a number of different tooltips are created by using the jBox plug-in. The tooltips towards top, left along with a tooltip that moves with the mouse direction is also created. You may click the div or hover for displaying these tooltips as mentioned on each div text:<\/p>\n
\"jQuery<\/p>\n
See online demo and code<\/strong><\/h6>\n
The markup:<\/strong><\/p>\n
<div class=\"targets-wrapper\">\r\n\r\n<div id=\"Tooltip-1\" class=\"target\">Top Tooltip<\/div>\r\n\r\n<div id=\"Tooltip-2\" class=\"target\">Left Tooltip<\/div>\r\n\r\n<div id=\"Tooltip-3\" class=\"target\">Black Top<\/div>\r\n\r\n<div id=\"Tooltip-4\" class=\"target\">Hover me<\/div>\r\n\r\n<div id=\"Tooltip-5\" class=\"target\">Follow mouse Tooltip<\/div>\r\n\r\n<div id=\"Tooltip-6\" class=\"target\">Hover me<\/div>\r\n\r\n<div id=\"Tooltip-7\" class=\"target-click\">On Click with style<\/div>\r\n\r\n<div id=\"Tooltip-8\" class=\"target-click\">Click for large Tooltip<\/div>\r\n\r\n<\/div><\/pre>\n
 <\/p>\n
Display notices in different directions<\/strong><\/h3>\n
For creating the notices in different directions of the screen, include the reference of the jBox.Notice.js<\/em> file along with plug-in main file. Also, include the jBox.Notice.css<\/em> in the <head> section. In this demo, notices are created that will display as you press the div text on demo page.<\/p>\n
Following notices will display:<\/p>\n