Creating Modal Dialog in Sharepoint 2010 using Visual Studio 2010

This article will explain how to create a modal dialog using Visual studio 2010.

Open visual studio 2010 and create Empty Sharepoint project. Name it as ‘ModalDialog’. Select Deploy as farm solutions option.

Right click on ‘ModalDialog’ project at the Solution explorer, Add New Item.

Select VisualWebPart template and name it as ‘Upload’.

Add the following script to the Upload user control.

<script type="text/javascript">

function OpenWebPage() {

var options = {

url: "http://sharepoint-pc:3395/sites/mcts/SitePages/TestModal.aspx",

width: 400,

height: 100,

dialogReturnValueCallback: DialogCallback

};

SP.UI.ModalDialog.showModalDialog(options);

}

function DialogCallback(dialogResult, returnValue) {

meesageId = SP.UI.Notify.addNotification(returnValue, false);

}

script>

For the url at the above script insert the url you want to show in the modal dialog.

Under the script> add a button to do the action.

<input type="button" value="Upload" id="btnUpload" onclick="OpenWebPage();"/>

Build the solution and Deploy.

You will find the web part under Custom category.

Add the Web part to a web page and test it!!