diff --git a/web/ons-demo/js/controllers.js b/web/ons-demo/js/controllers.js
index abe966b..513799b 100644
--- a/web/ons-demo/js/controllers.js
+++ b/web/ons-demo/js/controllers.js
@@ -26,16 +26,20 @@
 	controllers.on('dblclick', function (c) {
 		if (model.activeControllers.indexOf(c) != -1) {
 			var prompt = 'Dectivate ' + c + '?';
-			if (confirm(prompt)) {
-				controllerDown(c);
-				setPending(d3.select(this));
-			};
+			doConfirm(prompt, function (result) {
+				if (result) {
+					controllerDown(c);
+					setPending(d3.select(this));
+				};
+			})
 		} else {
 			var prompt = 'Activate ' + c + '?';
-			if (confirm(prompt)) {
-				controllerUp(c);
-				setPending(d3.select(this));
-			};
+			doConfirm(prompt, function (result) {
+				if (result) {
+					controllerUp(c);
+					setPending(d3.select(this));
+				};
+			});
 		}
 	});
 
diff --git a/web/ons-demo/js/flows.js b/web/ons-demo/js/flows.js
index fa0ccf2..bc30d11 100644
--- a/web/ons-demo/js/flows.js
+++ b/web/ons-demo/js/flows.js
@@ -142,16 +142,18 @@
 		row.on('dblclick', function () {
 			if (d) {
 				var prompt = 'Delete flow ' + d.flowId + '?';
-				if (confirm(prompt)) {
-					deleteFlow(d);
-					d.deletePending = true;
-					updateSelectedFlows();
-
-					setTimeout(function () {
-						d.deletePending = false;
+				doConfirm(prompt, function (result) {
+					if (result) {
+						deleteFlow(d);
+						d.deletePending = true;
 						updateSelectedFlows();
-					}, pendingTimeout)
-				};
+
+						setTimeout(function () {
+							d.deletePending = false;
+							updateSelectedFlows();
+						}, pendingTimeout)
+					};
+				});
 			}
 		});
 
diff --git a/web/ons-demo/js/init.js b/web/ons-demo/js/init.js
index a412440..f7bd55b 100644
--- a/web/ons-demo/js/init.js
+++ b/web/ons-demo/js/init.js
@@ -9,16 +9,20 @@
 
 	d3.select('#action-all').on('click', function () {
 		var prompt = "Switch controllers to all?"
-		if (confirm(prompt)) {
-			switchAll();
-		}
+		doConfirm(prompt, function (result) {
+			if (result) {
+				switchAll();
+			}
+		});
 	});
 
 	d3.select('#action-local').on('click', function () {
 		var prompt = "Switch controllers to local?"
-		if (confirm(prompt)) {
-			switchLocal();
-		}
+		doConfirm(prompt, function (result) {
+			if (result) {
+				switchLocal();
+			}
+		});
 	});
 
 	d3.select('#action-scale').on('click', function () {
diff --git a/web/ons-demo/js/topologyactions.js b/web/ons-demo/js/topologyactions.js
index 6501e5b..28d418b 100644
--- a/web/ons-demo/js/topologyactions.js
+++ b/web/ons-demo/js/topologyactions.js
@@ -101,16 +101,20 @@
 	var circle = d3.select(document.getElementById(data.dpid)).select('circle');
 	if (data.state == 'ACTIVE') {
 		var prompt = 'Deactivate ' + data.dpid + '?';
-		if (confirm(prompt)) {
-			switchDown(data);
-			setPending(circle);
-		}
+		doConfirm(prompt, function(result) {
+			if (result) {
+				switchDown(data);
+				setPending(circle);
+			}
+		});
 	} else {
 		var prompt = 'Activate ' + data.dpid + '?';
-		if (confirm(prompt)) {
-			switchUp(data);
-			setPending(circle);
-		}
+		doConfirm(prompt, function (result) {
+			if (result) {
+				switchUp(data);
+				setPending(circle);
+			}
+		});
 	}
 }
 
@@ -148,78 +152,87 @@
 
 		if (s1Data.className == 'edge' && s2Data.className == 'edge') {
 			var prompt = 'Create flow from ' + srcData.dpid + ' to ' + dstData.dpid + '?';
-			if (confirm(prompt)) {
-				addFlow(srcData, dstData);
+			doConfirm(prompt, function (result) {
+				if (result) {
+					addFlow(srcData, dstData);
 
-				var flow = {
-					dataPath: {
-						srcPort: {
-							dpid: {
-								value: srcData.dpid
+					var flow = {
+						dataPath: {
+							srcPort: {
+								dpid: {
+									value: srcData.dpid
+								}
+							},
+							dstPort: {
+								dpid: {
+									value: dstData.dpid
+								}
 							}
 						},
-						dstPort: {
-							dpid: {
-								value: dstData.dpid
-							}
-						}
-					},
-				        srcDpid: srcData.dpid,
-				        dstDpid: dstData.dpid,
-					createPending: true
-				};
+					        srcDpid: srcData.dpid,
+					        dstDpid: dstData.dpid,
+						createPending: true
+					};
 
-				selectFlow(flow);
+					selectFlow(flow);
 
-				setTimeout(function () {
-					deselectFlowIfCreatePending(flow);
-				}, pendingTimeout);
-			}
+					setTimeout(function () {
+						deselectFlowIfCreatePending(flow);
+					}, pendingTimeout);
+				}
+			});
+
 		} else {
 			var map = linkMap[srcData.dpid];
 			if (map && map[dstData.dpid]) {
 				var prompt = 'Remove link between ' + srcData.dpid + ' and ' + dstData.dpid + '?';
-				if (confirm(prompt)) {
-					removeLink(map[dstData.dpid]);
-				}
+				doConfirm(prompt, function (result) {
+					if (result) {
+						removeLink(map[dstData.dpid]);
+					}
+				});
 			} else {
 				map = linkMap[dstData.dpid];
 				if (map && map[srcData.dpid]) {
 					var prompt = 'Remove link between ' + dstData.dpid + ' and ' + srcData.dpid + '?';
-					if (confirm(prompt)) {
-						removeLink(map[srcData.dpid]);
-					}
+					doConfirm(prompt, function (result) {
+						if (result) {
+							removeLink(map[srcData.dpid]);
+						}
+					});
 				} else {
 					var prompt = 'Create link between ' + srcData.dpid + ' and ' + dstData.dpid + '?';
-					if (confirm(prompt)) {
-						var link1 = {
-							'src-switch': srcData.dpid,
-							'src-port': 1,
-							'dst-switch': dstData.dpid,
-							'dst-port': 1,
-							pending: true
-						};
-						pendingLinks[makeLinkKey(link1)] = link1;
-						var link2 = {
-							'src-switch': dstData.dpid,
-							'src-port': 1,
-							'dst-switch': srcData.dpid,
-							'dst-port': 1,
-							pending: true
-						};
-						pendingLinks[makeLinkKey(link2)] = link2;
-						updateTopology();
-
-						linkUp(link1);
-
-						// remove the pending links after 10s
-						setTimeout(function () {
-							delete pendingLinks[makeLinkKey(link1)];
-							delete pendingLinks[makeLinkKey(link2)];
-
+					doConfirm(prompt, function (result) {
+						if (result) {
+							var link1 = {
+								'src-switch': srcData.dpid,
+								'src-port': 1,
+								'dst-switch': dstData.dpid,
+								'dst-port': 1,
+								pending: true
+							};
+							pendingLinks[makeLinkKey(link1)] = link1;
+							var link2 = {
+								'src-switch': dstData.dpid,
+								'src-port': 1,
+								'dst-switch': srcData.dpid,
+								'dst-port': 1,
+								pending: true
+							};
+							pendingLinks[makeLinkKey(link2)] = link2;
 							updateTopology();
-						}, pendingTimeout);
-					}
+
+							linkUp(link1);
+
+							// remove the pending links after 10s
+							setTimeout(function () {
+								delete pendingLinks[makeLinkKey(link1)];
+								delete pendingLinks[makeLinkKey(link2)];
+
+								updateTopology();
+							}, pendingTimeout);
+						}
+					});
 				}
 			}
 		}
diff --git a/web/ons-demo/js/utils.js b/web/ons-demo/js/utils.js
index 65117f5..265c661 100644
--- a/web/ons-demo/js/utils.js
+++ b/web/ons-demo/js/utils.js
@@ -201,6 +201,45 @@
 }
 
 
+/***************************************************************************************************
+
+***************************************************************************************************/
+function doConfirm(prompt, cb) {
+	var confirm = d3.select('#confirm');
+	confirm.select('#confirm-prompt').text(prompt);
+
+	function show() {
+		confirm.style('display', '-webkit-box');
+		confirm.style('opacity', 0);
+		setTimeout(function () {
+			confirm.style('opacity', 1);
+		}, 0);
+	}
+
+	function dismiss() {
+		confirm.style('opacity', 0);
+		confirm.on('webkitTransitionEnd', function () {
+			confirm.style('display', 'none');
+			confirm.on('webkitTransitionEnd', null);
+		});
+	}
+
+	confirm.select('#confirm-ok').on('click', function () {
+		d3.select(this).on('click', null);
+		dismiss();
+		cb(true);
+	});
+
+	confirm.select('#confirm-cancel').on('click', function () {
+		d3.select(this).on('click', null);
+		dismiss();
+		cb(false);
+	});
+
+	show();
+}
+
+