How to create a SharePoint modal pop-up message on page load

2018-05-15_07-55-34

This solution involves two files:

  • The aspx page that holds the content of the pop-up
  • The script that loads the aspx page in a modal dialog upon page load
  1. Save this .aspx page to your “Site Pages” directory.
    -OR-
    Copy and paste the following into a new .aspx page in your Site Pages or Pages (Settings wheel –> Site Contents –> Site Pages or Pages) directory:

    Wrap this block in style tags:
    [code]
    h1 {
    color: #ed7522;
    text-align: center;
    }
    h2 {
    color: #ed7522;
    text-align: center;
    }
    p {
    color: #1f2844;
    font-size: 1em;
    }
    input {
    font-family: “Segoe UI”;
    font-size: 1em;
    }
    [/code]
    Paste directly beneath (no additional tags):
    [code]

    [/code]

  2. Modify the content in the aspx page beneath the modal-content div and above the input tag to include your own images, formatting and message text.
  3. Save this javascript file to your Site Assets (Settings wheel –> Site Contents –> Site Assets) or scripts folder
    -OR-
    Copy and paste the following into a new javascript file in your Site Assets:

    Note: Wrap the following in script tags:
    [code] _spBodyOnLoadFunctionNames.push(‘showPopup’);
    function showPopup() {
    var options = {
    title: “Notice“,
    url: “https://sharepointlibrarian.sharepoint.com/SitePages/HomePopUp.aspx” };
    SP.UI.ModalDialog.showModalDialog(options);
    }
    [/code]
  4. Update the script to include the URL of your newly saved aspx page and a title for the pop-up window (optional).
  5. Add a content editor web part to the page on which you’d like the pop-up.
    1. Edit page
      editpage
    2. Add web part
      insert web part
    3. Edit web part
      editwebpart
    4. Paste URL to the javascript file in your Site Assets and click “OK”
      content editor pop up
    5. Save page/stop editing
      stopediting

That’s it! Your pop-up should now function upon page load. When/if you wish to “turn off” the pop-up without deleting the files (so you can reuse later easily) just add “//” before line 7 in the javascript file and save to “comment out” the function. This prevents the pop-up from loading. When you’re ready to use the pop-up again just remove the two slashes and save.
comment out

I recommend using SharePoint Designer to easily access and modify the ASPX page and/or javascript file.

Advertisements

Written by SharePoint Librarian

I'm a SharePoint Business Analyst and Jayhawk from the Kansas City Area.

One comment

  1. I really appreciate the detailed but easy to follow guide. Finally an approach that I was able to implement. I have one question and that is why does the pop-up only trigger when I hit CTRL+F5?
    I cannot get the pop-up to show up with just F5 or visiting a site collection via bookmarked link.
    Could this have to do with the _spBodyOnLoadFunctionNames.push?

    Thanks for your help.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.