How to Create a Pop-Up Dialog in SharePoint?

Business Cases:

§  Simple Case. (If you want to open SharePoint dialog and don't care about width, height ...).

§  Complex Case. (To control dialog properties such as title, width, callback functions ….).

§  Notification. (To notify user about any information).

§  Loading Wait Screen. (Working on it dialog).

§  Open Modal Dialog in custom action (ECB Menu).

Note : all this cases valid for application pages and web part pages.

Business Cases Details:

Case One (Simple Case)

By using SP.UI.ModalDialog.OpenPopUpPage(url, callback, width, height); javascript function.
url : The URL of the page to be shown in the modal dialog.
callback : function pointer to callback function that runs when the modal dialog is closed.
width : The width of the modal dialog.
height : The height of the modal dialog.

Demo:

1-    Edit page and embed code in it

2-    Put this markup in the page source

 <a href="javascript:OpenPopUpPage('http://bing.com');">Test Link</a>

This method is very simple but it has many disadvantages:

1-    fixed title.

Case One (Complex Case)

By using Modal Dialogs.

Modal Dialogs are one of the new features provided by SharePoint 2010. It's the dialog framework provided by the JavaScript client object model. Modal Dialogs can fetch data from anywhere and display it over the page. One good feature about the Modal Dialogs is, there won't be any navigation to another page, making the user to stay in the context of the current page. The number of post backs will also be reduced by using modal dialogs. These dialogs are used in a large scale in many of the operations, like creating a page, viewing/editing item properties etc.

These dialogs are JavaScript pop up dialogs with an iFrame in which the data is displayed.

'SP.UI' namespace from the client object model provides a static class 'SP.UI.ModalDialog' with many methods which are used for creating dialogs and controlling their behavior. 

Demo

1-    Create Content Editor Web Part.

2-    Edit source and write this script

<script type="text/javascript"> //User Defined Function to Open Dialog Framework function OpenDialog(strPageURL) {   var dialogOptions = SP.UI.$create_DialogOptions();   dialogOptions.url = strPageURL;// URL of the Page   dialogOptions.title = 'Welcome to SharePoint'   dialogOptions.allowMaximize= true   dialogOptions.width = 750; // Width of the Dialog   dialogOptions.height = 500; // Height of the Dialog   dialogOptions.dialogReturnValueCallback = Function.createDelegate( null, CloseCallback); // Function to capture dialog closed event   SP.UI.ModalDialog.showModalDialog(dialogOptions); // Open the Dialog   return false; } // Dialog close event capture function function CloseCallback(strReturnValue, target) {   if (strReturnValue === SP.UI.DialogResult.OK) // Perform action on Ok.     {    alert("User clicked Ok!");     }   if (strReturnValue === SP.UI.DialogResult.cancel) // Perform action on Cancel.    {    alert( "User clicked Cancel!");    } } </script> <a onclick="OpenDialog('http://bing.com');">open dialog</a>​

Different Properties

There are various properties the showModalDialog() method accepts through the options object. Below is the list of these properties

Property Name	Type	Description
allowMaximize	boolean (true/false)	Determines the visibility of the maximize button (at top right corner) for the modal dialog
Args	Object	The args property allows us to pass arbitrary properties into our dialog.
autoSize	boolean (true/false)
dialogReturnValueCallback	Function	This property accepts a callback function which gets executed when the dialog is closed.
Height	Numeric	The height of the dialog
Html	HTML Element	The HTML to be rendered in the window (when the URL property is not specified)
showClose	boolean (true/false)	Determines the visibility of the close button (at top right corner) for the modal dialog
showMaximized	boolean (true/false)	If set to true, the dialog will render maximized, ie., it fills the available screen space.
Title	string	Title of the modal dialog. When no title is specified, the title of the document referred to by the Url property is used instead.
url	string	The URL of the page to be shown in the dialog.
Width	numeric	The width of the dialog to be displayed
X	numeric	Specifies the starting position from the left, where the dialog is to be rendered
Y	numeric	Specifies the starting position from the bottom, where the dialog is to be rendered

Another Demo:

<script type="text/javascript"> function ShowWelcomeDialog() { var htmlP = document.createElement('p'); var htmlMsg = document.createTextNode('Our SharePoint blog'); htmlP.appendChild(htmlMsg); var options ={ html: htmlP, title:'Welcome to SharePoint Developers Hub', width:400, height:75, dialogReturnValueCallback: ShowStatus }; SP.UI.ModalDialog.showModalDialog(options); } function ShowStatus(dialogResult, retValue) { SP.UI.Notify.addNotification("The dialog is closed"); } </script> <a title="Open Dialog" href="javascript:ShowWelcomeDialog();">Open Dialog</a>

Case Three (Notification)

Demo

<script> function Notify() { SP.UI.Notify.addNotification("Every thing is ok."); } </script> <a href="javascript:Notify();">Notify me</a> ​​

Case Four (Loading Wait Screen)

By using SP.UI.ModalDialog.showWaitScreenWithNoClose.

SP.UI.ModalDialog.showWaitScreenWithNoClose(title, message, height, width);

Demo

SP.UI.ModalDialog.showWaitScreenWithNoClose(SP.Res.dialogLoading15); or SP.UI.ModalDialog.showWaitScreenWithNoClose('Loading Title', 'Loading Message Here...');

Case Five (Open Modal Dialog in ECB Menu)

t if you want to open dialog from ECB menu? Create new custom action in Element.xml file and in UrlAction tag use the following javascript function.

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">      <CustomAction         Id="{B0B5A0CB-7FBE-4dd6-9B2A-2B1E1321B8F9}"         RegistrationType="List"         RegistrationId="101"         Location="EditControlBlock"         Title="Goto My Blog">              <UrlAction Url="javascript: function onClose(){ }           var o = {             url: 'http://www.google.com ',             title: 'MyBlog',             allowMaximize: true,             showClose: true,             width: 700,             height: 500,             dialogReturnValueCallback: onClose           };           SP.UI.ModalDialog.showModalDialog(o);"/>     </CustomAction>  </Elements>