var mymodal = new gModal({
title: "This is the best code example Modal",
body: "This is example defines <strong>all</strong> the available configurations so shows the real power of this library",
buttons: [
{
content: "Cancel",
classes: "gmodal-button-gray",
bindKey: 27, /* Esc */
callback: function(modal){
console.log("You hace cancelled the modal!");
modal.hide();
}
},{
content: "Accept",
classes: "gmodal-button-blue",
bindKey: 13, /* Enter */
callback: function(modal){
console.log("You have accepted the modal!");
modal.hide();
}
}
],
close: {
closable: true,
location: "in", /* 'in' or 'out' (side) the modal */
/**
* Reusing the key 27 here would throw a warning.
* Button bindings have more priority and would override this.
*/
bindKey: false,
callback: function(modal){
console.log("You have closed the modal!");
modal.hide();
}
},
/**
* Modal Events.
* Note that, by default, we destroy modal after hiding it.
**/
onShow: function(modal){},
onHide: function(modal){ modal.destroy(); },
onCreate: function(modal){},
onDestroy: function(modal){}
});
mymodal.show();
var mymodal = new gModal({
title: "This is the alert example Modal",
body: "<center>You just clicked the Alert modal trigger!</center>",
buttons: [
{
content: "Accept",
classes: "gmodal-button-blue",
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();
}
}
});
mymodal.show();
var mymodal = new gModal({
title: "Do you like this library?",
body: "<center>Think twice before answer. If you say NO we will blacklist your IP in this website</center>",
buttons: [
{
content: "No",
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: "Yes",
classes: "gmodal-button-green",
bindKey: false, /* no key! */
callback: function(modal){
console.log("We love you too <3!");
modal.hide();
}
}
],
close: {
closable: false,
}
});
mymodal.show();
var mymodal = 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,
}
});
mymodal.show();
var mymodal = new gModal({
title: "These are our terms and conditions you'll never read",
body: "<p>Lorem ipsum dolor ...",
buttons: [{
content: "I accept",
classes: "gmodal-button-blue",
bindKey: 13, /* Enter */
callback: function(modal){
console.log("Well, you accepted");
modal.hide();
}
}],
close: {
closable: false,
}
});
mymodal.show();
var mymodal = new gModal({
body: "<p>Lorem ipsum dolor ...",
});
mymodal.show();
var title = document.createElement("p");
title.innerText = "DOM API Modal";
var body = document.createElement("p");
body.innerText = "This body was generated using the Javascript DOM API";
var mymodal = new gModal({
title: title,
body: body,
});
mymodal.show();