SharePoint 2010 introduces the new Dialog functionality that allows users to easily edit and update items from links on a page without having to leave that page; this works well and has a nice user experience.  The dialog functionality is primarily intended for use when editing list items or document properties, but I have had numerous requests to open other content (like news items) in dialogs as well.  This is relatively simple to do through JavaScript but does require a developer to be involved for each request, which is often time-consuming and expensive.  Ideally, there should be a way for the Content Authors themselves to specify which links open as dialogs and which do not.  Unfortunately, Microsoft does not provide such functionality.

To rectify that, I came up with the process below that seems to work fairly well by letting authors define links and simply include a custom tag at the end of the url.  Most places in SharePoint support this, whereas other solutions, like using “javascript:…” snippets as hrefs are not supported to the same extent.

1. Identify a short token that users can easily remember and can add to urls.  In my case, this was #AsDialog.
2. Embed the JavaScript below somewhere that is common to all pages in your site.  Usually this means in a custom .JS file or the master page
3. Instruct your authors to include the token (#AsDialog) at the end of any links that they want opened in a dialog
4. that’s it.  the rest is automatic

The script uses jQuery (what JavaScript doesn’t use that these days?) to find all links that end with the token and replaces those links with calls to the SharePoint UI showModalDialog() function.  The function itself supports other parameters like title, height and width but those would only serve to complicate the example.  If your users need the ability to specify additional information like that on the link itself then you will probably need to either heavily modify this approach or come up with something completely different.

jQuery(document).ready(function() {
   jQuery('a[href$="#AsDialog"]').each(function() {
      var anchorTag=jQuery(this).parent();
      var hrefUrl=("" + this).replace('#AsDialog','');
      anchorTag.attr("onclick","SP.UI.ModalDialog.showModalDialog({autoSize: true, url: '" + hrefUrl + "'});return false;");
      anchorTag.attr("href",hrefUrl);
      anchorTag.prop("href",hrefUrl);
   });
});

The process does have a few limitations and caveats (below) but it seems to work well overall.

• content that is linked through other methods, like ‘onclick’ handlers on DIVs are not affected
• certain analytics that attaches to event handlers (i.e. WebTrends) could possibly be overwritten