SharePoint 2010 Modal Dialog Popup for Form

The modal dialog requires JavaScript to open whatever page you would like to see.  This page can be the newform.aspx, a custom form, or a list view.  The modal dialog will open it with presence that darkens the page you open it from.

Place this code in a script block on the page, I use the PlaceHolderAdditionalPageHead region:


<asp:Content ContentPlaceholderID="PlaceHolderAdditionalPageHead" runat="server">

<script type="text/javascript">

function OpenEditDialogUpdate(item_title, item_id){var options = {url:"https://portal.com/_layouts/listform.aspx?PageType=8&ListId={9F02637E-A2ED-4B96-B89D-7EC6D38FCFB6}&RootFolder=",width:800,height:700,dialogReturnValueCallback: DialogCallback}; SP.UI.ModalDialog.showModalDialog(options);}

function OpenEditDialogDocument(item_title, item_id){var options = {url:"https://portal.com/_layouts/Upload.aspx?List={BE1FDCF3-D737-4977-B0ED-C4B5D6D7D797}&RootFolder=",width:800,height:370,dialogReturnValueCallback: DialogCallback}; SP.UI.ModalDialog.showModalDialog(options);}

function OpenEditDialogEvent(item_title, item_id){var options = {url:"https://portal.com/_layouts/listform.aspx?PageType=8&ListId={056BD164-52ED-4C96-9278-8C394B928189}&RootFolder=",width:800,height:820,dialogReturnValueCallback: DialogCallback}; SP.UI.ModalDialog.showModalDialog(options);}

function DialogCallback(dialogResult, returnValue){}

</script>

</asp:Content>

You will need one Function for each modal dialog you need to open.  The DialogCallback function is only needed once per page.  You need to size the window explicitly with a width and height.  I will manually fire the event on the page and see how the size looks and adjust until it is correct.

To fire the function:

<td class="ActionCell">

  <div class="ActionDiv">

    <a href="#" onclick="OpenEditDialogUpdate('Title',14);">

      <span class="ActionText">New Update</span>

    </a>

  </div>

</td>

Here is my CSS styling that also generates a button with hover effects:

/* ACTION BUTTONS */

.ActionCell {text-align:center;width:33%;}

.ActionText {font-family:"Myriad Web Pro";font-size:large;}

.ActionDiv a {display:block;background-color:#000099;padding:5px 0px;}

.ActionDiv a:link {text-decoration:none;color:#CCCCCC;}

.ActionDiv a:hover {text-decoration:none;background-color:#1C1CFF;color:white;}

.ActionDiv a:visited {color:#CCCCCC;}