Creating a SharePoint Transparent Overlay DIV


When ever you need to display a transparent overlay in SharePoint, you can reuse the one provided by SharePoint itself.

SharePoints transparent overlay is displayed anytime you display a model dialog, like a list form for instance;

Transparent Overlay
Transparent Overlay

SharePoint creates this overlay as part of rendering up a modal dialog in SP.UI.Dialog.js, and is created as an immediate child DIV of the body element – oddly, once the overlay has been created, it isn’t removed from the DOM, it just hangs about.

Transparent Overlay DIV
Transparent Overlay DIV

So anyway, to reuse this stuff the snippet below will let you show or hide the overlay – creating it if necessary;

var PDogs = Pdogs || {};
PDogs.Overlay = function () {
	var _el = null,
	
	Off = function () {
		var overlay = _el != null ? $(_el) : $('.ms-dlgOverlay');
		overlay.css({ display: 'none' });
	},
	
	On = function (tellSharePoint, zindex) {
		/* replicate function: SP.UI.Dialog.$2N_0(zindex) 
		 */
		var zi = zindex || 0;
		if (_el == null) {
			var e = $('.ms-dlgOverlay');
			if (e.length < 1) {
				// create it
				_el = document.createElement('div');
				_el.className = 'ms-dlgOverlay';
				document.body.appendChild(_el);
			} else {
				_el = e.get(0);	// already created
			}
		}
		
		if (zi < 1499) {
			if (typeof SP.UI.ModalDialog.get_$1E_1 !== 'undefined') {
				/* use the zindex (-1) of the most recent SP UI Dialog opened */
				zi = (SP.UI.ModalDialog.get_$1E_1() * 5 + 1500) - 1;
			} else {
				zi = 1499;
			}
		}
		_el.style.display = 'block';
		_el.style.zIndex = zi;
		_el.style.width = '1920px';
		_el.style.height = '1200px';
		if (typeof tellSharePoint !== 'undefined' && !!tellSharePoint) {
			if (typeof SP.UI.Dialog.set_$X_0 === 'function') {
				SP.UI.Dialog.set_$X_0(_el);
			}
		}
	};
	return {
		On: On,
		Off: Off
	};
}();

If you add this to a .js file and include it in your masterpage for instance, you’d use it like so;

$(function() {
	$("#createoverlay")
		.click(function (e) {
			e.preventDefault();
			PDogs.Overlay.On(true);
		});
	$(document).on('click', '.ms-dlgOverlay', 
		function (e) {
			e.preventDefault();
			PDogs.Overlay.Off();
		});
});

Published by

Phil Harding

SharePoint Consultant, Developer, Father, Husband and Climber.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.