Author: | jsanahuja |
---|---|
Views Total: | 417 views |
Official Page: | Go to website |
Last Update: | August 1, 2020 |
License: | MIT |
Preview:

Description:
gModal is a multifunctional modal library used to create responsive, fully configurable alert, confirm, and prompt modals in an easy way.
More features:
- Custom OK, Confirm, Cancel buttons.
- Allows you to bind any keys to action buttons.
- Supports HTML content in the modal body.
- Auto destroys the modal after closed.
How to use it:
1. Add references to the gModal’s JavaScript and CSS files.
<link href="dist/gModal.min.css" rel="stylesheet" /> <script src="dist/gModal.min.js"></script>
2. Create a basic modal popup and override the default modal title & content.
var basicDemo = new gModal({ title: 'Modal Title Here', body: 'Modal Body Here. Also Supports <strong>html</strong> Content.', })
3. Create an alert dialog with custom action buttons.
var alertDemo = new gModal({ title: 'Modal Title Here', body: 'Modal Body Here. Also Supports <strong>html</strong> Content.', buttons: [ { content: "OK", classes: "gmodal-button-blue", // or red, green, grey bindKey: 13, /* Enter */ callback: function(modal){ console.log("You just accepted the Alert Modal"); modal.hide(); } } ], close: { callback: function(modal){ console.log("You just closed the Alert Modal"); modal.hide(); } } })
4. Create a confirm dialog with Confirm and Cancel buttons.
var confirmDemo = new gModal({ buttons: [ { content: "Cancel", classes: "gmodal-button-red", bindKey: false, /* no key! */ callback: function(modal){ console.log("You have said NO!!!!"); console.warn("Getting your ip..."); console.warn("Blacklisting your ip..."); console.error("Successfully blacklisted."); modal.hide(); } },{ content: "Confirm", classes: "gmodal-button-green", bindKey: false, /* no key! */ callback: function(modal){ console.log("We love you too <3!"); modal.hide(); } } ], close: { closable: false, } })
5. Create a prompt dialog.
var confirmDemo = new gModal({ title: "Let's know you better", body: "<center><p>What is your name?</p><input type='text' id='name'></center>", buttons: [{ content: "Continue", classes: "gmodal-button-blue", bindKey: 13, /* Enter */ callback: function(modal){ var name = document.getElementById("name").value; name = name == "" ? "Mr. Unnamed" : name; console.log("Welcome home "+ name); modal.hide(); } }], close: { closable: false, } })
6. Show the modal when needed.
instance.show();
7. All default configuration options and callback functions.
title: 'Default gModal title', body: 'This is the default body. It can include <strong>html</strong>. ' + 'You can also leave it empty so we will hide it :).', buttons: [ /* No buttons by default */ ], close: { closable: true, location: 'in', bindKey: 27, callback: function(modal) { modal.hide(); } }, // callbacks onShow: function(modal) {}, onHide: function(modal) { modal.destroy(); }, onCreate: function(modal) {}, onDestroy: function(modal) {}
Changelog:
v2.2.0 (08/01/2020)
- Added support for Javascript DOM API both in body and title parameters.