Pop-up windows in the homepage

Hi everyone,
is there a plug-in to add a pop-up window after loading the homepage?

I would like to add something like “check this or that publication” to highlight or add important news messages, maybe showing a static page into a pop-up box in the middle of the screen.

If there are not plug-in, do you have any suggestion on how to do it?
Our current version: 3.2.1.3

Many thanks in advance and best regards,
P.

Hi @Pau,

I don’t know off-hand of such a plugin, but other community members may be aware of something.

But if you were interested in development a plugin, as a starting point, you may wish to check out our plugin development guide: Plugin Guide - Language Selection

-Roger
PKP Team

Hi @rcgillis, many thanks for your answer.
Let’s wait if someone else has tips.

Many thanks,
Pau

Hi @Pau!

I looked for a pop-up banner to inform users about a service outage due to scheduled maintenance. Then I used the official PKP’s Custom Header Plugin and I added the following code (freely inspired by this webpage, found on google).

<div id="ojs_popup" style="display: none; z-index: 2; background: rgba(0,0,0,0.5); position: fixed; width: 100%; height: 100%; top: 0px; left: 0px;">
	<div id="beyond_popup" style="z-index: 1; background-color: #fff; width: 30vw; padding: 1em 1em 1.8em; position: absolute; transform: translate(-50%,-50%); left: 50%; top: 50%; border-radius: 8px; text-align: center;">
        <button id="closing_popup" style="display: block; margin:  -.5em 0 .5em auto; border: none; background-color: transparent; cursor: pointer; font-size: 1.2em;">&times;</button>
        This is an alert about my journal.
	</div>
</div>
<script>
	if (document.title.includes("|")) {} else {
	window.addEventListener("load", function(){setTimeout(function open(event){document.querySelector("#ojs_popup").style.display = "block";},500)});
	document.querySelector("#closing_popup").addEventListener("click", function(){document.querySelector("#ojs_popup").style.display = "none";});
	}
</script>

Basically it adds a gray background and a centered box with your message. Both are not visible as long as the title-page contains a pipe (i.e. “Submissions | Journal Title”). For my experience, this condition should make it pop-up just in the journal homepage.

If you are not an expert user, you can paste the whole text in the plugin settings replacing only “This is an alert about my journal”. Otherwise you can customize it with css and html instructions.

It’s just a unsophisticated solution, so any suggestion is welcome!

Bye,
Michele