Ply.dialog("alert", "Wow!").always(function (ui) { 	ui.state; // true — "OK", false — "cancel" 	ui.by; // submit, overlay, esc, "x" 	ui.widget; // Ply instance });  //or Ply.dialog("confirm", "Do you like it?") 	.done(function (ui) { 		// OK 	}) 	.fail(function (ui) { 		// Cancel 	}) 	.always(function (ui) { 		if (ui.state) { 			// Clicked "OK" 		} 		else { 			// Clicked "Cancel" 			//   details: `ui.by` — "cancel", "overlay", "esc", "x" 		} 	});

Ply.dialog({ 	"init-state": { 		ui: "alert", 		data: "Wow!", 		next: "other-step" 		nextEffect: "3d-flip[180,-180]" 	},  	"other-step": { 		ui: "confirm", 		data: { 			text: "What's next?", 			ok: "Exit",     // button text 			cancel: "Back" 		}, 		back: "init-state", 		backEffect: "3d-flip[-180,180]" 	} }).always(function (ui) { 	if (ui.state) { 		// OK 	} else { 		// Cancel 		// ui.by — 'overlay', 'x', 'esc' 	} })

var ply = new Ply({ 	el: "...", // HTML-content  	effect: "fade", // or ["open-effect:duration", "close-effect:duration"]  	layer: {}, // default css  	overlay: { // defaults css 		opacity: 0.6, 		backgroundColor: "#000" 	},  	flags: { // defaults 		closeBtn: true, // presence close button "✖" 		bodyScroll: false, // disable scrollbar at body 		closeByEsc: true, // close by press on `Esc` key 		closeByOverlay: true, // close by click on the overlay 		hideLayerInStack: true, // hide the layer if it is not the first in the stack 		visibleOverlayInStack: false // visibility overlay, if the layer is not the first in the stack 	},  	// Callback 	oninit: function (ply) {}, 	onopen: function (ply) {}, 	onclose: function (ply) {}, 	ondestory: function (ply) {}, 	onaction: function (ui) {}, });   // And ply.open().always(function () { 	ply.swap({ el: ".." }, "3d-flip").always(function () { 		ply.close(); 	}); });

Ply.dialog("alert", { effect: ["fade", "scale"] }, "Fade & scale");

Ply.effects["my-effect"] = { 	open:  { layer: "fade-in", overlay: "background-in" }, 	close: { layer: "fade-out", overlay: "background-out" } };  Ply.effects["background-in"] = { 	"from": { opacity: 0, backgroundColor: "red" }, 	"to":   { opacity: 1, backgroundColor: "white" } };  Ply.effects["background-out"] = { 	"from": { opacity: 1, backgroundColor: "white" }, 	"to":   { opacity: 0, backgroundColor: "green" } };

Ply.build(); // <div/> Ply.build("input"); // <input/> Ply.build(".foo"); // <div class="foo"/> Ply.build(".foo.bar"); // <div class="foo bar"/> Ply.build({  // <input type="password" class="foo" style="padding: 10px" maxlength="32"/> 	tag: "input.foo", 	type: "password", 	css: { padding: "10px" }, 	maxlength: 32 }); Ply.build({ text: "<i>?</i>" }); // <div>&lt;i&gt;?&lt;/i&gt;</div> Ply.build({ html: "<i>!</i>" }); // <div><i>!</i></div>

var el = Ply.ui("btn", { 	title: "click me", 	value: "Wow!" })

Ply.ui.factory("btn", function (data, children) { 	// data:`Object` 	// children:`HTMLElement`  	return { 		"tag": ".btn", 		"text": data.value 	}; });  // or button with icon (optional) Ply.ui.factory("btn", function (data, children) { 	return { 		"tag": ".btn", 		"title": data.title 		"children": [ 			data.icon && { "tag": "span.glyphicon.glyphicon-" + data.icon }, 			{ "tag": "span", "text": data.value } 		] 	}; });

Ply.factory("subscribe", function (options, data, resolve) { 	// options — ply options 	// data — user data 	// resolve — done function 	resolve({ 		"header": "Spam subscribe", 		"content": { 			"fieldset": { 				"name": { label: "Username", value: data.name }, 				"email": { label: "E-mail", value: data.email }, 				"agree": true 			} 		}, 		ctrls: { 			"ok": true, 			"cancel": "abort" // for example 		} 	});  	// OR 	var element = template(data); 	resolve(element); });   Ply.ui.factory("fieldset", function (data, children) { 	return { 		tag: ".fieldset", 		children: children 	}; });   // Default element in `fieldset` Ply.ui.factory("fieldset *", function (data) { 	var uid = Math.round(Math.random() * 1e9).toString(36); 	return { 		tag: ".field", 		children: [ 			{ tag: "label", forHtml: uid, text: data.label }, 			{ tag: "input", id: uid, name: data.name, value: data.value } 		] 	}; });   Ply.ui.factory("fieldset agree", function (data) { 	var uid = Math.round(Math.random() * 1e9).toString(36); 	return { 		tag: ".field", 		children: [ 			{ tag: "input", type: "checkbox", id: uid, name: "agree", value: "Y" }, 			{ tag: "label", forHtml: uid, text: "I agree." } 		] 	}; });   // Usage Ply.dialog("subscribe", { 	"name": "RubaXa", 	"email": "[email protected]", });