How to Open or Close Modal Dialogs in SharePoint 2010

No.of Views4272
Bookmarked0 times
Downloads 
Votes0
By  Mostafa Elzoghbi   On  25 Oct 2011 08:10:08
Tag : SharePoint , Design and Customization
Recently, one of colleagues asked me that how to open and close the Model Dialog in the SharePoint as like JQuery model popup, I have come up a solution using pure Javascript that I'm going to share with you.
emailbookmarkadd commentsprint

Images in this article missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at info@codegain.com

 

Introduction

Recently, one of colleagues asked me that how to open and close the Model Dialog in the SharePoint as like JQuery model popup, I have come up a solution using pure Javascript that I'm going to share with you.The solution is very simple and easy to adapt in your project with few lines of code.

Implementation

The SharePoint 2010 comes with a new modal dialogs feature that allows you to Open Modal windows from you application pages or ribbons. In this post i will highlight on how to open and close Modal Dialogs in SharePoint 2010.

If you have an Application page and you want to open up a modal dialog this is what you want to write in JavaScript using COM (Client Object Model) :In your page, Add the following button to open modal dialog:

input onclick="openPopup();" title="Open Modal" type="button" value="Open Modal Dialog";

On you Page Head "PlaceHolderAdditionalPageHead" content add the following JavaScript function implementation "openPopup":

function openPopup() {
var options = {
url: '/_layouts/MYSPDemo/DialogPage.aspx',
title: 'Modal Dialog',
allowMaximize: false,
showClose: true,
width: 600,
height: 500
}
SP.UI.ModalDialog.showModalDialog(options);
}

The DialogPage is an application Page in your solution as specified above, Now try to deploy you solution and click on your button, your application page is showing as modal dialog... THIS IS AWESOME,

To close you modal window, this is the line you need to add on you cancel or close button on your page:

SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel, "Cancelled");

Output

Image Loading

Hope this helps, To get the full documentation for ModalDialog using Client Object model, here is the KB url.

References

http://msdn.microsoft.com/en-us/library/ff408909.aspx

 
Sign Up to vote for this article
 
About Author
 
Mostafa Elzoghbi
Occupation-
Company-
Member Type-Junior
Location-United States
Joined date-07 Jun 2010
Home Page-http://moustafa-arafa.blogspot.com
Blog Page-http://moustafa-arafa.blogspot.com
MCSD,MCT,MCTS,C# MVP
 
 
Other popularSectionarticles
Comments
There is no comments for this articles.
Leave a Reply
Title:
Display Name:
Email:
(not display in page for the security purphase)
Website:
Message:
Please refresh your screen using Ctrl+F5
If you can't read this number refresh your screen
Please input the anti-spam code that you can read in the image.
^ Scroll to Top