How to make a Modal Page (Dialog Page) in the SharePoint 2010

• (SharePoint JavaScript Modal Framework  )
• Place a Content Editor Web Part in the page and Switch to the Source Edit Mode in the editor and place the following code by putting your page URL. You can put either relative or absolute URLs.
• If you are not going to use content editor you can edit the row HTML as well.
• Put the following script to the page. you can put the code to

• <script type="text/javascript">
     function OpenDialog(myurl) { 
          var options = SP.UI.$create_DialogOptions(); 
          options.url = myurl; 
         // options.width = 500; 
         // options.height = 400; 
         //options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback); 
          SP.UI.ModalDialog.showModalDialog(options); 
      } 
  </script>

  
  

•  You can put this code to Additional page header section in yout page.SharePoint will allow to put in that section.

Then you can call as follows.

• <a onlick=”javascript:OpenDialog(‘/sites/alr/SitePages/Reservation.aspx’)” >Show</a>

This is sample URL I have Put.

You can even use for trigger a call back event using the modal frame work. in a later post i will show you how to it. 

this is also sample dialog i have created to display workflow visualization.

Following are the list of options you can put as dialog options.

Property	Data type	Default value	Description
allowMaximise	boolean	true	Determines whether the maximise button is present on the rendered dialog.
args	object		We’ll examine this property in more detail later. The args property allows us to pass arbitrary properties into our dialog.
autoSize	boolean (true/false)	true	Determines whether the dialog should be automatically sized to fit within the parent browser window. Where a value has been set for width or height, this value is deemed to be false regardless of the actual setting.
dialogReturnValueCallback	function		We’ll examine this property in more detail. By passing a function, we can specify a section of script to be executed when the dialog is closed.
height	numeric		The height of the dialog to be displayed. If this value is not set the dialog is automatically sized to fit the window.
html	string		Where a Url is passed, an IFRAME tag is rendered pointing to the appropriate Url. AS an alternative to this, it is possible to pass arbitrary HTML instead, in which case, rather than an IFRAME tag, the arbitrary HTML is rendered instead.
showClose	boolean (true/false)	true	Determines whether the close button is visible in the titlebar of the dialog.
showMaximized	boolean (true/false)	false	Dictates whether the rendered dialog should fill the available space in the parent window.
title	string		Specifies the title of the dialog. Where no title is specified, the title of the document referred to by the Url property is used instead.
url	string	null	The url of the page to be shown in the dialog. Where a url is set and IFRAME tag will be rendered by the Dialog framework and the src of the IFRAME will be set to this url.
width	numeric		The width of the dialog to be displayed. If this value is not set the dialog is automatically sized to fit the window.
x	numeric		Specifies the starting position of the rendered dialog. If this value is not set the dialog is shown in the middle of the viewing area. This value represents the offset from the left edge of the parent browser window.
y	numeric		Specifies the starting position of the rendered dialog. If this value is not set the dialog is shown in the middle of the viewing area. This value represents the offset from the bottom of the parent browser window.