Create SharePoint Modal Popup Message After Page Load

I had a hard time trying to find the best article to develop SharePoint popup message after page load. I was in the middle of developing SharePoint server site. I wanted to display a message or a banner to display something everytime user access SharePoint site.

I had a hard time trying to find the best article to develop SharePoint popup messages after page load. I was in the middle of developing a SharePoint Server site. I wanted to display a message or a banner to display something everytime a user accesses the SharePoint site. I did a lot of research and found this article which helped me from start to finish. This was the closest article I could find. I decided to create an article on C# Corner to help others on how to create a popup message on their SharePoint sites. The steps below can be applied to any version of SharePoint server version from 2010, 13, 16 or later. 

 

Here are the steps -

 

Step 1

Create a text file in Notepad. Copy and paste this code. Save the file as Popup.aspx on the desktop. You can change the colors to h1(line 3), h2(Line 7), and p(line 11) sections. Customize the message header<h1> (line 22) and text set below the header <p> (line 23).  Also, you can customize the name of the button in line 24 located value= 

<style>
h1 {
    color: #000000;
    text-align: center;
}
h2 {
    color: #000000;
    text-align: center;
}
p {
    color: #000000;
    font-size: 1em;
}
input {
    font-family: "Segoe UI";
    font-size: 1em;
}
</style>
<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">
            <h1>Welcome to SharePoint!!!!!!</h1>
            <p>This is a SharePoint Message. </strong></p>
            <input type="button" href="#" value="OK" onclick="window.frameElement.cancelPopUp(); return false;" />
        </div>
    </div>
</div>

Step 2

Create another text file and copy and paste this code. In the URL: section (line 5), replace [Type SharePoint URL HERE] with your SharePoint URL. Leave Site/Popup.aspx default. Save the file as Popup.js on the desktop. 

<script language="javascript" type='text/javascript'>
 _spBodyOnLoadFunctionNames.push('showPopup');
  function showPopup() {
     var options = {
        url: "[Type SharePoint URL HERE]/SitePages/PopUp.aspx" };
    SP.UI.ModalDialog.showModalDialog(options);
  }

</script>

Step 3

Launch SharePoint Central Administration.

Step 4

Select Site settings. 

 

 

 

Step 5

Select Manage site features. 

 

Step 6

Activate Wiki Page Home Page feature.

 

 

 

Step 7

Click settings icon.

Step 8

Select Site contents.

Step 9

Select Site Pages.

 

Step 10

Select upload. Click the browse button.

 

 

Step 11

Select Popup.aspx file saved on the desktop. Click OK.

Step 12

Click Save.

Step 13

Click settings icon.

Step 14

Select site assets. 

 

 

 

Step 15

Select upload and click the browse button.

• Select Popup.js file saved on the desktop. Click OK.
• Click Save.
• Click Central Administration link located in the left pane.
• Click Page tab on the left pane.
• Select Edit Page.

 

 

 

Step 16

Scroll to the bottom of Central Administration page click Add a Web Part link.

• Select the Media and Content folder under Categories.
• Select Content Editor under Parts.

  

 

Step 17

Click the Add button. Content Editor is added to the Web part.

• Hover mouse to Content Editor Check the checkbox in the right site of Content editor to select the content editor. 
• Click drop-down button next to checkbox in the right pane.
• Select Edit WebPart. Content Editor window display in the right side of Central Administration site page.

 

Step 18

Click the content link ellipsis button. Text Editor -- webpage dialog window popup window displays.

 

 

 

Step 19

Type /SiteAssets/Popup.js (This located upload Popup.js file from step 11).

 

 

 

Step 20

Click OK.

Step 21

Click OK.

Step 22

Select the page tab. Click Stop Editing.

 

 

 

Step 23

The SharePoint Central Administration site will refresh. The popup dialog message will display - Welcome to SharePoint!!!! This is a SharePoint Popup Message!!! - after the page loads. 

  

You can close the popup window by either clicking the OK button or the close button. This popup message will display everytime you access to SharePoint Central Administration. You can add modal popup message to any site you desire as long as you complete the steps above.