Often we come across requirements where we are asked to open a page as Modal popup in SharePoint 2010. There are multiple benefits of using Modal Popups:
1. Gives your site a uniformity
2. External sites and forms can be browsed without user actually leaving your site
To open a site as modal popup, you can reuse the code used by SharePoint itself. Just call the following functional in the event where you want to open the Popup.
NewItem2(event, http://www.targetsite. com/);javascript:return false;
In the example below, I have opened an external site on the click event of a link.
< a onclick="javascript:NewItem2( event,& quot;http://www.targetsite. com/"); javascript:return false;" href="http://www.targetsite. com/" target="_self">Target page</a>
In the above example, if you have the value of URL in href property of the anchor tag you can also use the HTML as below
< a onclick="javascript:NewItem2( event,this.href); javascript:return false;" href="http://www.targetsite. com/" target="_self">Target page</a>
But make sure that you use 'return false'.
Alternatively, if you want to modify the size of the popup or add any more functionality in the PopUp, you can create a new function similar to the below:
function ModalPopUpSP2010(url)
{
var NewPopUp = SP.UI.$create_DialogOptions();
ModalPopUp.url = URL;
ModalPopUp.width = 800;
ModalPopUp.height = 400;
SP.UI.ModalDialog. showModalDialog(ModalPopUp);
}
And call this function as
< a onclick="javascript:ModalPopUpSP2010(‘http://www. targetsite.com/’)" href="http://www.targetsite. com/" target="_self">Target page</a>
1. Gives your site a uniformity
2. External sites and forms can be browsed without user actually leaving your site
To open a site as modal popup, you can reuse the code used by SharePoint itself. Just call the following functional in the event where you want to open the Popup.
NewItem2(event, http://www.targetsite.
In the example below, I have opened an external site on the click event of a link.
< a onclick="javascript:NewItem2(
In the above example, if you have the value of URL in href property of the anchor tag you can also use the HTML as below
< a onclick="javascript:NewItem2(
But make sure that you use 'return false'.
Alternatively, if you want to modify the size of the popup or add any more functionality in the PopUp, you can create a new function similar to the below:
function ModalPopUpSP2010(url)
{
var NewPopUp = SP.UI.$create_DialogOptions();
ModalPopUp.url = URL;
ModalPopUp.width = 800;
ModalPopUp.height = 400;
SP.UI.ModalDialog.
}
And call this function as
< a onclick="javascript:ModalPopUpSP2010(‘http://www.
When opening a custom page in this manner how do you close it other than the X at the top. I have tried a few options including window.close() and open(location, '_self').close(); and these do not work.
ReplyDelete