Modal dialogs are really fun to work with but can be frustrating to implement if you don’t know what’s required to work with them. If you have a Java background you will be amazed with how SharePoint deals with modal dialogs. The concept is almost the same but you need a slightly different approach to implement it.

Modal dialogs in SharePoint 2010 use the client library SP.UI.ModalDialog and showModalDialog. We can do the following within the context of a page without leaving the page:

• Add and Edit metadata
• Perform administrative task
• Attach documents/files

The following step-by-step instructions show you how to implement a modal dialog in your server side pages:

1. Create a hyperlink that will be responsible for triggering your modal. Set the onclick attribute as follows:

<a href="#" onclick="javascript:openDialog(); return false;">Open Attach File</a>

2. Implement the openDialog function in javascript.

<script type="text/javascript">
    function openDialog() 
    {
        var options = 
        {
	    url: http://server/_layouts/AttachFile.aspx?ListId={0F42F104-538C-4F3C-8098-0DD93C8CD779}&ItemId=246&Source=http%3A%2F%2Fdeadmines%2Fsites%2Fhorizon%2FLists%2FYear%2520End%2FMy%2520Inbox%2520%2520All%2520lists.aspx,
	    width: 800,
	    height: 600,
	    title: "Attach File",
        };
	SP.UI.ModalDialog.showModalDialog(options);
    }
</script>

To be more dynamic…

Hard coding the url is not recommended because it is really hard to maintain. There are lots of ways to make your code dynamic and this is only one of them. We could have also leveraged the url query strings that contain most of this information.

3. Create hidden fields to store the information you will need to modify the url.

    <input type="hidden" id="listId" runat="server" />
    <input type="hidden" id="itemId" runat="server" />
    <input type="hidden" id="sourceUrl" runat="server" />
    <input type="hidden" id="webUrl" runat="server" />

4. Setup the hidden fields in your Page_Load event.

        listId.Value = list.ID.ToString();
        itemId.Value = listItem.ID.ToString();
        sourceUrl.Value = list.DefaultViewUrl;
        webUrl.Value = web.Url;

5. Use the hidden fields in the javascript function you wrote above.

<script type="text/javascript">
    function openDialog() 
    {
        var options = 
        {
	    url:  $("#<%= webUrl.ClientID %>").val()+ "/_layouts/AttachFile.aspx?ListId=" + $("#<%= listId.ClientID 
                     %>").val() + "&ItemId=" + $("#<%= itemId.ClientID %>").val() + "&Source=" + $("#<%= 
                     sourceUrl.ClientID %>").val(),
	    width: 800,
	    height: 600,
	    title: "Attach File",
        };
	SP.UI.ModalDialog.showModalDialog(options);
     }
</script>

I will end my blog by quoting one of my favorite programming quotes by C.A.R. Hoare:

There are two ways of coding. On way is to make it so simple that there are obviously no deficiencies. And the other way is to make it so complicated that there are no obvious deficiencies.