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;}

Comments

Popular posts from this blog

SharePoint Designer 2013 Approval Workflow with Comments

Change SharePoint server hostname and Web Application Names

SharePoint Search - Content Processing Pipeline Failed to Process the Item