A Small, Multipurpose Modal Library for JavaScript | iBox

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

See Demo And Download