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.. 

)