Full-featured Modal Popup Plugin - iBox

File Size: 244 KB
Views Total: 2041
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Full-featured Modal Popup Plugin - iBox

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

More features:

  • Supports plain text and HTML content.
  • Allows you to append more content to the existing modal window.
  • Allows you to asynchronously load an external URL.
  • Content loading indicator.

How to use it:

1. To get started, load the iBox plugin's files from the dist directory.

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

2. Create a new iBox instance.

const myPopup = new ibox();

3. Set the content to be displayed in the modal popup.

// set new content
myPopup.content_set("<h2>jQueryScript.Net</h2><img src='https://source.unsplash.com/600x300/?people'>");

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

3. Display the modal window on the screen.

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

// or
myPopup.content_show();

// or
myPopup.show();

5. Append more 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 methods.

// 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);

Changelog:

2021-04-01

  • fixed dependabot alerts

v3.5.2 (2021-01-16)

  • bugfix

v3.5.0 (2021-01-01)

  • new head image style and more

v3.4.2 (2020-12-22)

  • fixed more problems with CustomEvent

v3.2.3 (2020-12-12)

  • fixed some problems with multiple ibox instances stacking and blocking each others close buttons
  • security updates
  • other small fixes

v3.2.3 (2020-09-23)

  • Removed jQuery dependency.
  • Doc & Demo updated.

2019-09-20

  • added custom events
  • controls the ability to close the iBox by the user

This awesome jQuery plugin is developed by C2H6-383. For more Advanced Usages, please check the demo page or visit the official website.