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:

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

    Paste directly beneath (no additional tags):

    <div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog" style="font-family:'Segoe UI';width:auto;height:auto;">
    <div class="modal-content"><span style="color:#ff0000;"><img style="width:400px;margin:auto;display:block;" src="https://sharepointlibrarian.files.wordpress.com/2017/12/office365-e1513273911343.png" /></span>
    <h1>SP Librarian Maintenance</h1>
    <h2>Monday, Apr 16</h2>
    <span style="color:#ff0000;">We will be performing <strong>routine maintenance on SharePoint Librarian</strong></span> <span style="color:#ff0000;">                              Monday morning from 4 am - 5 am. </span> <span style="color:#ff0000;">There may be a brief disruption for users online during that time. </span> <span style="color:#ff0000;">The maintenance window is scheduled for 1 hour. </span></div>
    </div>
    </div>
    
  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:

     _spBodyOnLoadFunctionNames.push('showPopup'); 
       function showPopup() {
         var options = {
           title: "<span style="color:#ff0000;">Notice</span>",
           url: "<span style="color:#ff0000;">https://sharepointlibrarian.sharepoint.com/SitePages/HomePopUp.aspx</span>" };
         SP.UI.ModalDialog.showModalDialog(options);
      }
    
  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