luci-base: cbi.js: add modal dialog functions

Add two new functions showModal() and hideModal() which will fade in and
close an open modal respectively.

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

1 files changed, 35 insertions, 0 deletions

diff --git a/modules/luci-base/htdocs/luci-static/resources/cbi.js b/modules/luci-base/htdocs/luci-static/resources/cbi.js
index b3ba8259f9..294b2d7486 100644
--- a/modules/luci-base/htdocs/luci-static/resources/cbi.js
+++ b/modules/luci-base/htdocs/luci-static/resources/cbi.js
@@ -2292,8 +2292,43 @@ function hideTooltip(ev) {
 	tooltipTimeout = window.setTimeout(function() { tooltipDiv.removeAttribute('style'); }, 250);
 }
 
+
+var modalDiv = null;
+
+function showModal(title, children)
+{
+	var dlg = modalDiv.firstElementChild;
+
+	while (dlg.firstChild)
+		dlg.removeChild(dlg.firstChild);
+
+	dlg.setAttribute('class', 'modal');
+	dlg.appendChild(E('h4', {}, title));
+
+	if (!Array.isArray(children))
+		children = [ children ];
+
+	for (var i = 0; i < children.length; i++)
+		if (isElem(children[i]))
+			dlg.appendChild(children[i]);
+		else
+			dlg.appendChild(document.createTextNode('' + children[i]));
+
+	document.body.classList.add('modal-overlay-active');
+
+	return dlg;
+}
+
+function hideModal()
+{
+	document.body.classList.remove('modal-overlay-active');
+}
+
+
 document.addEventListener('DOMContentLoaded', function() {
 	tooltipDiv = document.body.appendChild(E('div', { 'class': 'cbi-tooltip' }));
+	modalDiv = document.body.appendChild(E('div', { 'id': 'modal_overlay' },
+		E('div', { 'class': 'modal' })));
 
 	document.addEventListener('mouseover', showTooltip, true);
 	document.addEventListener('mouseout', hideTooltip, true);