A Small, Multipurpose Modal Library for JavaScript | iBox

iBox is a multi-purpose media library for JS that displays dynamic elements or other pages directly on your homepage, without leaving them behind. Control almost any feature with the help of JavaScript.

iBox is a simple but full-featured jQuery JavaScript popup plugin developed to create a responsive modal window for both static and dynamic content.

More advantages:

  • Supports plain text and HTML content.
  • It allows you to attach more content to the existing modal window.
  • It allows you to asynchronously download an external URL.
  • Content download indicator.

Must Read – Minimal and Small JavaScript Library for Modal Dialog | MinimalModal.js

How to make use of it:

1. To get began, load the iBox plugin’s files from the dist listing.

<link href="./dist/ibox.css" rel="stylesheet">
<script src="./dist/ibox.js"></script>

2. Create a brand new iBox instance.

const myPopup = new ibox();

3. Set the content material to be displayed within the modal popup.

// set new content
myPopup.content_set("<h2>Multipurpose Modal iBox</h2>
<img src='https://source.unsplash.com/600x300/?people'>"); // set new content from an external link myPopup.content_async_set('https://www.example.com');

4. Display the modal window on the display.

// the same as myPopup.display(true) 
myPopup.open();

// or
myPopup.content_show();

// or
myPopup.show();

5. Append extra content to the modal window.

// append new content
myPopup.content_append('New Content Here');

// append new content from an external link
myPopup.content_async_append('https://www.example.com');

6. More API strategies.

// create the instance
myPopup.create();

// get the modal ID
myPopup.getId();

// remove the modal
myPopup.remove();

// close the modal
myPopup.close();

// remove the modal from the DOM
myPopup.hide();

// allow to close?
myPopup.allow_close(true/false);

// get the modal content
myPopup.content_get();

// clear the modal content
myPopup.content_clear();

// show the content and hide the loading indicator
myPopup.content_show();

// hide the content and show the loading indicator
myPopup.content_hide();

// get the instance
myPopup.get_instance(ibox_id);

// get the dom
myPopup.get_dom();

// trigger events
myPopup.event_add(event, callback);

7. Event handlers.

myPopup.event_add('open', callback);

myPopup.event_add('close', callback);

myPopup.event_add('content_asnyc_loading', callback);

myPopup.event_add('content_asnyc_loaded', callback);

myPopup.event_add('created', callback);

myPopup.event_add('destroy', callback);

myPopup.event_add('content_show', callback);

myPopup.event_add('content_hide', callback);

myPopup.event_add('close_failed', callback);

Browser Compatibility

IE 11EdgeChromeFirefoxiOS SafarimacOS Safari
✔️✔️✔️✔️✔️

Read More – 

Morphing Material Design Floating Action Button With Modal
Vue Stackable Modal Component By Innologica


See Demo And Download

Official Website(C2H6-383): Click Here

This superior jQuery/javascript plugin is developed by C2H6-383. For extra Advanced Usage, please go to the official website.

Share