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);

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($) {
    $.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;

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


 var isDlg = $.QueryString["isDlg"];
 if(isDlg && isDlg == "1"){
  $('body > :not(#MSO_ContentTable)').hide(); //hide all nodes directly under the 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..