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;

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.

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