Create SharePoint Modal Popup Message After Page Load

Leroy Smalls

7 Comments

Join the conversation! Your thoughts help the community grow.

abc Chauhan5y ago
It is possible same pop up message in modern Sharepoint site? Can anyone help please?
John Liter6y ago
Can you add add multiple URLs to the JS file so dont have to upload it to every page?
joanna b7y ago
Hi! thanks for this. i followed your steps but the popup is only appearing in edit mode, or the site won't let me enter edit mode. any suggestions?
- Leroy Smalls7y ago
  Hi, sorry for the extremely late reply. did you try to check out the page you are trying to set the popup modal on? Checkout by Navigating to Site Settings -> Site Content -> Site Pages -> Click on "..." next to page name -> Click on "..." -> Check out
shaik rubina8y ago
If he is a invalid user then another reg. Form will open. The code is not in .cs file it is in base project we have retrieve data from base project and that reg data should save in collections it is a wizard implementation window application any body have comment pls share with me
shaik rubina8y ago
Continue,,
shaik rubina8y ago
How to validate data present in login form to know whether he is a admin or user. If he is a admin should go to the form which contains all user information.

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.