I have a page with custom layout and contains 3 web part zone.In each web part zone I have inserted apps like announcement.I need to show pop up on click of the content in the announcement web part.I am getting pop up within the iframe of the announcement webpart. I need to get it on the center of the page (outside the iframe).How to achieve it
You can use JQuery plugin SimpleModal
There's an option called "appendTo", where you can tell where do you put your Modal. The only problem with that approach is that the modal's overlay appear with iframe's size, so you must give it your desired width and height after you open it.
$('#div-modal').modal({
appendTo: $(window.parent.document).find('body'),
overlayCss: {backgroundColor:"#333"}, // Optional overlay style
overlayClose:true,
});
// Set overlay's width
$(window.parent.document).find('#simplemodal-overlay').css('width', '100%');
If the div you want to open as a modal is in your parent window, you could replace $('#div-modal') with $(window.parent.document).find('#div-modal')
-
Could you tell me what is "div-modal" mention above?Could you show this with an example because I am not clear with the solution mentioned – sherin Jul 1 '16 at 7:12
-
It will be the MAIN DIV's ID of the modal dialog. It is not related to SharePoint modal popup but it will get that ID of your modal dialog & show it to your parent page outside the iframe. – Hardik Jul 1 '16 at 7:15
-
-
No.I got error as blocked a frame with origin from accessing a frame with origin. Protocols, domains, and ports must match. – sherin Jul 1 '16 at 10:07
-
"Uncaught SecurityError: Blocked a frame with origin 'provider domain' from accessing a frame with origin 'mydomain'. Protocols, domains, and ports must match". Error Message – sherin Jul 1 '16 at 10:12
For me i Use this Method to display the pop-up of the Edit Form for eg.
function EditRecordFromList(id) {
SP.UI.ModalDialog.showModalDialog({
url: _spPageContextInfo.webAbsoluteUrl + "/Lists/CA/EditForm.aspx?ID=" + id,
title: "My Pop Up Title",
allowMaximize: true,
showClose: true,
dialogReturnValueCallback: refreshCallback
});
};
function refreshCallback(dialogResult, returnValue) {
SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);
}
