Using image button with Modal pop up on SharePoint page

Many times we need to add image buttons instead of normal submit button, to improve the styling of the page or to match up the styling of overall site.

Image button is ASP.NET control so adding it with Content editor webpart is not possible. You need use SharePoint designer for this. Given below are steps:

1.      Open the SharePoint page and choose to edit the page in SharePoint Designer

 

2.      In the Designer, click on the area where you want to add the button

3.      In the insert ribbon choose image button from ASP.NET section as shown below

4.      Drag and drop the image button where you want to place it

5.      Now you can set up various properties of this button by using the Tag Properties block on the right hand side.

6.      To open a new link on the click of the image button, you have to provide the value of new URL in “PostBackURL” property

7.      If you want to open a new window as modal pop up, you can provide the Javascript function in “OnClientClick” property. This property can also be used for client side validation etc.

8.      For modal pop up use the following code (change the target )

NewItem2(event,”http://www.targetsite.com/”); return false;