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
- 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:
[code]
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;
}
[/code]
Paste directly beneath (no additional tags):
[code]
SP Librarian Maintenance
Monday, Apr 16
We will be performing routine maintenance on SharePoint Librarian Monday morning from 4 am – 5 am. There may be a brief disruption for users online during that time. The maintenance window is scheduled for 1 hour.
[/code]
- 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.
- 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:
[code] _spBodyOnLoadFunctionNames.push(‘showPopup’);
function showPopup() {
var options = {
title: “Notice“,
url: “https://sharepointlibrarian.sharepoint.com/SitePages/HomePopUp.aspx” };
SP.UI.ModalDialog.showModalDialog(options);
}
[/code] - Update the script to include the URL of your newly saved aspx page and a title for the pop-up window (optional).
- Add a content editor web part to the page on which you’d like the pop-up.
- Edit page
- Add web part
- Edit web part
- Paste URL to the javascript file in your Site Assets and click “OK”
- Save page/stop editing
- Edit page
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.
I recommend using SharePoint Designer to easily access and modify the ASPX page and/or javascript file.
Leave a Reply