Creating a modal dialog with SharePoint 2010

SharePoint 2010 introduces modal dialogs

SharePoint 2007 UI was something out of 1998 (sorry Violet Blue for stealing that joke). The kinds of issues that clients raised with me in 1999: screen blinks, page changes, confusing history, were all their in SharePoint 2007 in spades. SharePoint 2007 with essentially an IE 6 tool, and lacked the "Web 2.0" UI and UX technology that we have all grown to love in Flickr, Facebook, YouTube, LinkedIn, Twitter, Foursquare, Yelp.....

SharePoint 2010 introduces the ability to creates more AJAX interactions and less JavaScript. In this demo I will show the foundations for putting modal dialogs that don't post back in to SharePoint 2010 sites.

With the new SharePoint master pages you have a great deal of new JavaScript functions that allow you to code UI's for SharePoint. In this example we use the SP.UI namespace. This namespace has a class called Dialog. You will be creating an instance of Dialog and setting its properties. You will then show it and close it.

To demonstrate this you can create a SharePoint page in SP 2010 that will run our JavaScript. We can call it what ever we want.

This is done by using the a typical input button, and adding a Content Place holder at the top of your new page, just under the includes, to store Javascript.

SharePoint new JavaScript classes for UI allow you to write the following commands

var value = SP.UI.Screate_DialogOptionsDialog();

value.url = "" Place in valid URL
value.width = define width and height
SP.UI.ModalDialog.ShowModalDialog(value)