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.

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

  1. 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 ?

  2. 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.

  3. 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.