3

I need to open an external web page, say, http://google.com in a modal dialog. So if I were to do

SP.UI.ModalDialog.showModalDialog(options);

I get a modal window, however, it adds the IsDlg=1 query string parameter. In fact, Google pukes at the parameter that is appended.

4 Answers 4

5

What you could do is pop up an application page in a modal dialog box (using the 2010 dialog framework) that contains an iframe to your desired location. You could pass in the url the iframe should show in the querystring (make sure you encode it first, and decode it in the application page).

Beware that in 2010 you'll have the ribbon as well, so what I've done to circumvent this is follow this blog post to include another querystring param when calling your application page to hide the ribbon.

7
  • So you are suggesting that I pop up a modal of an application page. Then somehow change the URL that is being displayed? This way, the IsDlg=1 would no longer show up? p.s. That's my colleague's blog post :) Jun 3, 2011 at 13:37
  • 1
    Nah I'm suggesting you pop up the application page, it'll append IsDlg, but you have an iframe in your app page which goes to where you want. Pass in the URL for the iframe in the querystring for the application page. Your colleague's a smart dude, that code helped me just last week :)
    – James Love
    Jun 3, 2011 at 14:46
  • Gotcha. That's a disgusting solution but it appears to be all you can do. Jun 3, 2011 at 15:21
  • Yeah, it is. Unfortunately the Modal Dialog framework will always append IsDlg to all URLs, as it was originally intended for use only with SharePoint Pages.
    – James Love
    Jun 3, 2011 at 19:11
  • @JamesLove: Is it possible to use the html option of the showModalDialog function to pass in the iframe HTML with the URL already embedded into it?
    – Stu Pegg
    Oct 6, 2011 at 7:45
7

Following on from James's answer, the html option of showModalDialog allows you to directly send html to be rendered in the dialog.

Unfortunately it accepts an HTML DOM object rather than an HTML string, so we would have to do the following:

<script language="javascript">
    function popUp() {
        var frame = document.createElement('iframe');
        frame.setAttribute('src', 'http://tsstsst.com');
        frame.setAttribute('width', '99%');
        frame.setAttribute('height', '98%');

        var options = {
            title: 'TssTssT',
            width: 950,
            height: 600,
            html: frame
        };

        SP.UI.ModalDialog.showModalDialog(options);
    }
</script>
<button OnClick="popUp();return false;">View Stu's blog!</button>

No application page required.

4
  • Thanks for the answer Stuart! That's a pretty neat solution and it should come in handy for me down the road. Oct 11, 2011 at 13:15
  • 1
    This solution doesn't work and produces a security violation error: This content cannot be displayed in a frame To help protect the security of information you enter into this website, the publisher of this content does not allow it to be displayed in a frame.
    – iOnline247
    Nov 9, 2011 at 15:44
  • @iOnline247: The code is fine, but the choice of website has since become problematic. Google is now explicitly forbidding this kind of usage, so I've updated it with my own iframe-friendly blog. :)
    – Stu Pegg
    Nov 9, 2011 at 16:03
  • 1
    Thanks for the clarification. This works as expected. :)
    – iOnline247
    Nov 10, 2011 at 15:22
0

You can simply try to use something like javascript:OpenPopUpPage('http://google.com') in a link. Please note that this code is case-sensitive.

1
  • I didn't know that existed..However, that seems to append 'IsDlg=1' to the URL still. If you do "javascript:OpenPopUpPage('google.com',600,600);", Google throws up at the IsDlg=1 param. Mar 9, 2011 at 19:49
0

I know this is a very old question, but it was still relevant to my situation and took hours to find a solution that worked and fit my needs.

I needed to be able to open a pdf to a specific page and zoom level inside a modal dialog: https://mycompany.sharepoint.com/.../doclib/mydoc.pdf#page=13&zoom=100.

I display it using an iframe. showModalDialog would break the pdf page and zoom settings by modifying the iframe url, adding the IsDlg=1 search query at the end: https://mycompany.sharepoint.com/.../doclib/mydoc.pdf#page=13&zoom=100?IsDlg=1.

What finally worked was to wrap the iframe (or whichever tag you're setting a url or href on) and then pass the wrapper element as the html property of the showModalDialog config (do not set the url property when doing this - it takes precedence over html).

function OpenPDFInDialog(url) {
    const iframe = document.createElement("iframe");
    iframe.setAttribute("src", url);
    iframe.setAttribute("width", "99%");
    iframe.setAttribute("height", "98%");

    const containerElement = document.createElement('div');
    containerElement.setAttribute("width", "100%");
    containerElement.setAttribute("height", "100%");
    containerElement.setAttribute("style", "width: 100%;height: 100%;");
    containerElement.appendChild(iframe);
    
    const w = width == undefined ? 1100 : width;
    const h = height == undefined ? 800 : height;
    const options = {
      html: containerElement, // MS says this should be a string, but it's not. Bad documentation.
      title: "Dialog Title",
      width: w,
      height: h,
      showClose: true,
      allowMaximize: true,
      autoSize: true,
    };
                  
    SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
  }

I opened the pdf directly from a SharePoint library, so it opens in the browser pdf viewer without page chrome or other elements. IsDlg had no impact on the displayed content, it was just preventing pdf settings from being accepted.

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.