Full-featured Modal Popup Plugin - iBox
File Size: | 244 KB |
---|---|
Views Total: | 2041 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.