JSDialog logo

JSDialog: Demo & Samples

Visual theme:

1. Dialog with form

The custom dialog creation and events handling.
var dlg = JSDialog.create(
	{
		elementId: 'btn1',
		width: 360,
		height: 115,
		title: 'Change your profile',
		contents: '<div style="height:40px">' +
		          '<div style="width:100px;text-align:right;float:left;line-height:30px">Name:</div>' +
		          '<input value="Jack" style="width:240px;float:right"/>' +
		        '</div>' +
		        '<div style="height:40px">' +
		          '<div style="width:100px;text-align:right;float:left;line-height:30px">Surname:</div>' +
		          '<input value="Daniels" style="width:240px;float:right"/>' +
		        '</div>' +
		        '<div style="height:40px">' +
		           '<div style="width:100px;text-align:right;float:left;line-height:30px">Country:</div>' +
		           '<input value="England" style="width:240px;float:right"/>' +
		        '</div>',
		buttons: [
			{
				type: 'ok'
			},
			{
				type: 'cancel'
			},
			{
				type: 'custom',
				title: 'Help',
				func: function() {
					JSDialog.showMessageDialog("Change the values and press 'OK'");
				}
			}
		],
		onOk: function(dlg) {
			var inputs = dlg.elContent.getElementsByTagName("input");
			JSDialog.showMessageDialog(
				"All the changes were applied successfully!\n\n" +
				  "Name: " + inputs[0].value + "\n" +
				  "Surname: " + inputs[1].value + "\n" +
				  "Country: " + inputs[2].value,
				"info",
				null,
				550,
				140
			);
			return true;
		}
	}
);

2. Many windows

Demo with three windows with custom positioning.
var dialogs = [];
for (var i=0; i<3; i++) {
	dialogs[i] = JSDialog.create(
		{
			title: "Dialog #" + (i+1),
			width: 290,
			height: 140,
			autoCenter: false,
			contents: '<img src="http://js.plus/img/icons100/demo-icon-' + (i+1) + '.png" style="margin: 20px"/>' +
			          '<div style="color: ' + (i==0 ? '#17FF37' : (i==1 ? '#17B0FF' : '#FF9D00')) +
			          ';font-size: 100px;font-weight: bold;float: right;margin-right:40px">' +
		  	          (i==0 ? 'A' : (i==1 ? 'B' : 'C')) +
		               '</div>',
			buttons: [{ type: 'ok' }]
		}
	);
}
var left, top;
var browserWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var browserHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
for (var i=0; i<3; i++) {
	left = (browserWidth / 2 - dialogs[i].getWidthWithBorders() / 2) - (i - 1) * 100;
	top = (browserHeight / 2 - dialogs[i].getHeightWithBorders() / 2) - (i - 1) * 100;
	dialogs[i].setPosition(left, top);
}
document.getElementById("btn2").onclick = function() {
	for (var i=0; i<dialogs.length; i++)
		dialogs[i].show();
}

3. Game in a dialog

Simple game demonstrating you using of a different events, buttons manipulations and some handy options.
var dlgGame = JSDialog.create(
	{
		elementId: 'btn3',
		width: 335,
		height: 145,
		title: 'The Game',
		contents: '<style media="screen" type="text/css">' +
		          'td.game { width:84px;height:84px;background-color:#5B5BB5;padding:10px;cursor:pointer; }' +
		          'td.game:hover { background-color:#6B6BC5; }' +
		          '</style>' +
		          '<div style="text-align:center;font-size:20px">Choose your destiny!</div>' +
		          '<table style="border-spacing: 20px;border-collapse: separate;"><tbody><tr>' +
		          '<td class="game"></td>' +
		          '<td class="game"></td>' +
		          '<td class="game"></td>' +
		          '</tr></tbody></table>',
		hasCloseBtn: false,
		buttons: [{
				type: 'ok',
				disabled: true
		}],
		onFirstShow: function(dlg) {
			var elsTd = dlg.elContent.getElementsByTagName("td");
			for (var i=0; i<elsTd.length; i++) {
				elsTd[i].onclick = function() {
					if (!dlgGame.newGame)
						return;
					var winnerCell = Math.floor(Math.random() * 3);
					var elsTd = dlgGame.elContent.getElementsByTagName("td");
					for (var i=0; i<elsTd.length; i++) {
						var elImg = document.createElement("img");
						if (i == winnerCell)
							elImg.src = 'http://js.plus/img/icons64/star.png';
						else
							elImg.src = 'http://js.plus/img/icons64/scull.png';
						elsTd[i].appendChild(elImg);
					}
					dlgGame.win = elsTd[winnerCell] == this;
					dlgGame.newGame = false;
					this.style.outline = "2px solid red";
					this.style.backgroundColor = "#3B3B95";
					var btnOk = dlg.getOkButton();
					btnOk.setEnabled(true);
					btnOk.setTitle(dlgGame.win ? "Get the prize" : "Fail");
				}
			}
		},
		onShow: function(dlg) {
			dlg.newGame = true;
			var elsTd = dlg.elContent.getElementsByTagName("td");
			for (var i=0; i<elsTd.length; i++) {
				elsTd[i].innerHTML = '';
				elsTd[i].style.outline = '';
				elsTd[i].style.backgroundColor = '';
			}
			var btnOk = dlg.getOkButton();
			btnOk.setEnabled(false);
			btnOk.setTitle(JSDialog.Lang.ok);
		},
		onOk: function(dlg) {
			if (dlg.win) {
				JSDialog.showMessageDialog(
					'Our love is your prize!',
					"http://js.plus/img/icons64/love.png"
				);
			} else {
				JSDialog.showMessageDialog(
					'You failed, good luck next time.',
					"error"
				);
			}
			return true;
		}
	}
);