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.
https://sharepointpowerpopups.com
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.
Hi Can we make this non modal popup i.e. user can focus on main page while minimizing that popup ?
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:
_spBodyOnLoadFunctionNames.push(‘showPopup’);
function showPopup() {
var options = {
title: “FREE Flu Shots for ALL Team Members!”,
width: 1500,
height: 500,
url: “https://ourwebsite.com/Pages/2020FluShot.aspx?IsDlg=1” };
SP.UI.ModalDialog.showModalDialog(options);
}
Is the page checked out? Published? I’d also check the script in case there are curvy quotation marks. Replace with straight if so.
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.
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?
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.
Okay. Take a look at this to see if it helps. Let me know if not. Something’s obviously not cooperating. https://spgeeks.devoworx.com/sharepoint-script-editor-only-works-in-edit-mode/
Hi. Can’t find where I can edit the main page in sharepoint online.
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 ?
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
Have you checked your browser security settings for how it handles JavaScript? May be worth looking into, a simple google search for your specific browser will show you where to find it and what to change.
Estou com problemas para inserir o arquivo no diretório da “Site Pages”, como eu faço?
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”
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.
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.
Olá, consegui inserir os itens no site, mas não consegui configurar a partir do passo 5. Qual web part devo utilizar? Há varias opções.
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.