Tuesday, September 25, 2012

Sharepoint 2007 - Modal Dialog Sharepoint2010-Like

Or .. How to show modal dialog with page content only.

In Sharepoint 2007 we don't have a client script framework that shows modal dialogs with ligthbox effect, as in Sharepoint 2010.
We can reproduce with a lot of jquery ui and similia.

In MOSS, we can use the function javascript of core.js, commonShowModalDialog.
Open Site and in Homepage, add a Content Editor Web Part with this simple code:


<a href="javascript:openInModalDialog()">CLICK HERE</a>

<script type="text/javascript">
function openInModalDialog()
{
  var url = "/Lists/Calendar/Calendar.aspx";
  commonShowModalDialog(url,"resizable: no; status:no; scroll: no; help: no; center: yes; dialogwidth:800px; dialogHeight:500px;",RetrieveItemValue);
}
</script>


Click on link opens modal dialog, but we show the entire page in window:



Now, open Calendar page in edit mode. Add Content Editor Web Part at the bottom of the page with code below.

We add jquery:

<script type="text/javascript" src="/intranet/Media/js/jquery-1.8.0.min.js"></script>

We define a new jquery function to get querystring values from url:

///////////////////////////////////////////////////////////
//FUNCTION GET QUERYSTRING VALUES
///////////////////////////////////////////////////////////
(function($) {
    $.QueryString = (function(a) {
        if (a == "") return {};
        var b = {};
        for (var i = 0; i < a.length; ++i)
        {
            var p=a[i].split('=');
            if (p.length != 2) continue;
            b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
        }
        return b;
    })(window.location.search.substr(1).split('&'))
})(jQuery);
///////////////////////////////////////////////////////////

Now, we add the function to retrieve page in modal dialog environment:

$(document).ready(function(){

 var isDlg = $.QueryString["isDlg"];
 if(isDlg && isDlg == "1"){
  $('body > :not(#MSO_ContentTable)').hide(); //hide all nodes directly under the body
  $("#MSO_ContentTable").appendTo('body');
 }

});

This function hides all elements in page, but the content table.

Then, save and back to home.
Edit first Content Editor WP, adding querystring "isDlg=1" to url in javascript:

var url = "/Lists/Calendar/Calendar.aspx?isDlg=1";


Now, save and click on Click Here link. Et voilĂ !


(
Note: An issue is that if you click on a link in modal dialog (i.e. New or change month) browser opens new windows page...
I think you can use jquery to control events on this modal dialog..
I did not try this solution.. 
)