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


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.
    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):


  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
    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: “” };
  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
    2. Add web part
      insert web part
    3. Edit web part
    4. Paste URL to the javascript file in your Site Assets and click “OK”
      content editor pop up
    5. Save page/stop editing

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.

18 Replies to “How to create a SharePoint modal pop-up message on page load”


    Power Popups for SharePoint is the most effective way to communicate your message and ensure it gets the required attention from your users. With Power Popups you can create Popups that display any content. Choose to add the Popup Content from a Page URL, HTML or Rich Text.

    Use Power Popups for alerts, banners, forms, news items, documents, galleries, redirects on close and any element. Display your Popup content more effectively and with style.

    Power Popups is the SPFx Webpart that comes with a wide range of available options, that let’s you create combinations of Popups and achieve eye catching effects for your messages easily and without any special coding knowledge.

  2. Hi – I’m having an issue with a pop-up dialog that I was able to create after reading your posts. The trouble I am having is that the pop-up works perfectly, but ONLY while I’m editing the page. Could you please share any insights you may have?

    Thank you,

    Here is the JS code that I am using, but only works while editing the page:

    function showPopup() {
    var options = {
    title: “FREE Flu Shots for ALL Team Members!”,
    width: 1500,
    height: 500,
    url: “” };

    1. Is the page checked out? Published? I’d also check the script in case there are curvy quotation marks. Replace with straight if so.

    2. Yes, and I do have them in straight double quotation marks.

      I don’t understand how it would work perfectly in edit mode and let me down after I publish.

      1. Not sure how your page is arranged but sometimes moving the CEWP above the rest of your content can help. Or are you using a Script Editor web part?

        1. Hi Nate – Currently, I am simply using a script editor web part.

          I have tried it with a content editor web part that called the JS from /SiteAssets… it does the same thing – works in edit but not after published. I did have that CEWP in the header.

  3. hello thank you for your explanation. I was wonder if i there is any way to make a pop up message for every new event added ?

  4. Its not working on a publishing site. It works fine if the page is not published. As soon as you publish the page it stops working

    1. 1) Verifique se você tem permissões para adicionar arquivos ao diretório “Site Pages”
      2) Se você não vir um diretório “Site Pages”, será necessário ativar o recurso de site “SharePoint Server Publishing”

      1. Obrigado pela ajuda! mas agora estou com outro problema lol, esta dando erro ao ativar o recurso. “Infraestrutura de Publicação do SharePoint Server” que precisa ser ativado antes.

        1. Ah, sim. Há outro recurso no nível do conjunto de sites que deve ser ativado antes que o recurso de site possa ser ativado. Ir para “Site Collection Features” e ativar esse recurso a mensagem de erro mencionada.

  5. 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 to Binu IdicullaCancel reply

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