Modal Dialog Box in SharePoint2010

When the OpenDialog method is invoked the SharePoint adds a div element named “ms-dlgContent”. The dialog contents are rendered from the passed URL. The passed URL can be a link to the web or a custom page. Also, the dialog can open a List Form dialog (Add/Edit). Another div element named “ms-dlgOverlay” disables the user from clicking on the original page and thus, provides the user with a modal dialog.

The showModalDialog method takes 1 parameter; an object of the Class SP.UI.DialogOptions. The option object contains the width and height of the dialog, the URL of the page and the dialog CallBack method name.

Step 1. JavaScript function

 

<script type="text/javascript">

function OpenDialog() {

var options= {

url:"/sitepages/myscustompage.aspx",

width: 800,

height: 600,

dialogReturnValueCallback: DialogCallback

};

SP.UI.ModalDialog.showModalDialog(options);

}

</script>

 

Step 2. Call javascript function on click of any button or any your control.

<input type="button" value="MY Custom Page" id="btn_dialog" onclick=" OpenDialog();"/>

If you want to close dialog box after executing your function code then add following line before end of function.

 

SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel, 'Cancel Clicked');