跨浏览器模态窗口|对话框|提示框插件 A Amazing layer/modal/dialog system

Alert

Hello %username%!

Ply.dialog("alert", "Hello %username%!");
					

Confirm

Continue?

						Ply.dialog(
							"confirm",
							{ effect: "3d-sign" },
							"Continue?"
						);
					

Prompt

Spam subscribe

						Ply.dialog("prompt", {
							title: "Spam subscribe",
							form: { email: "E-mail" }
						});
					

Dialogs / Multistep

You want to win?

						Ply.dialog({
							"intro": {
								ui: "confirm",
								data: {
									text: "You want to win?",
									ok: "Yes",
									cancel: "No"
								},
								next: "congratulations", // OK button
								nextEffect: "3d-flip[180,-180]",
								back: "exit", // Cancel button
								backEffect: "scale"
							},
							"congratulations": {
								data: {
									children: [{
										tag: "img",
										src: "img/1.gif"
									}],
									ok: "Okay"
								}
							},
							"exit": {
								data: "Very vain!"
							}
						});
					

∞ Customization examples ∞

Login

Login

						// Usage: ply@rubaxa.org / 123
						// ply/login.dialog.js
						Ply.factory('login', function (options, data, resolve) {
							options.flags = {
								closeBtn: false,
								closeByEsc: true,
								closeByOverlay: true,
								visibleOverlayInStack: true
							};

							options.onaction = function (ui) {
								var data = ui.data;
								return !ui.state || $.post('/api/login', data).fail(function () {
									$(ui.widget.el)
										.addClass('ply-invalid')
										.one('input', function () {
											$(this).removeClass('ply-invalid')
										})
									;
								});
							};

							// Use base factory
							Ply.factory.use('base', options, {
								title: 'Login',
								form: {
									email: 'E-mail',
									password: { hint: 'Password', type: 'password' }
								},
								ok: 'Enter',
								cancel: false
							}, resolve);
						});


						// app.js
						Ply.dialog('login').done(function (ui) {
							Ply.dialog('alert', 'Bingo!');
						});