1

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

2 Answers 2

1

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')

8
  • 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, 2016 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, 2016 at 7:15
  • @Sherin, Did you get it working?
    – Hardik
    Jul 1, 2016 at 8:22
  • 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, 2016 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, 2016 at 10:12
1

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);
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.