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">
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
Post a Comment