Open list item modal dialog (lightbox) with a hyperlink in SharePoint 2010

The modal dialog appears by default in SharePoint 2010 when you add, edit or view a list item from the List View Web Part. It’s the lightbox style look and feel where the background turns dark and a new dialog opens up on top, allowing you to view and edit items without having to leave the current page.

You may want to use this functionality with a hyperlink – for example in a Content Editor Web Part on a landing page. You can do this by using the code below:

<script type="text/javascript">
var options = {
url: "/Lists/Announcements/NewForm.aspx",
        title: "Add New Announcement",
        allowMaximize: true,
        showClose: true,
        width: 625,
        height: 525,
        dialogReturnValueCallback: silentCallback};
function open() {SP.UI.ModalDialog.showModalDialog(options);}
function silentCallback(dialogResult, returnValue) {
}
function refreshCallback(dialogResult, returnValue) {
    SP.UI.Notify.addNotification('Operation Successful!');
    SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);
}
</script>
<a href="javascript:open()">Click Here</a>

When you click on the “Click Here” link, it shows a dialog similar to the one pictured below:

A couple of things to note here – the “options” variable allows you to set the properties of the dialog, one of which is the dialogReturnValueCallback property. Setting this with the silentCallback function (used in the example above) returns to your landing page without a refresh. You can replace this with the refreshCallback function, which will refresh the page and show a pop-up message when an action is configured in the dialog. The best thing to do is play about with it and check out the difference.