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

Hi @Michevole,
thank you for your help!!! It worked perfectly!
I used this code:

<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;">
       <h1>Privacy & Cookies:</h1>
<p>This site uses cookies. By continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here:  <a href="https://www.****.org">Privacy Policy</a> </p>

 <button id="closing_popup" style="margin: 12px; padding: 12px; background-color: darkblue; color: aliceblue; border: none;border-radius: 4px;font-size: 12px; cursor: pointer;"> Close and accept</button>
	</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>

Do you have also some tips on how I can make it appear only once a session or anyway not every time I go back on the homepage?

Many thanks!

P.

Hello @Pau ,

I’m happy you find my solution useful! Honestly I can’t reply to your second answer. In the first post you asked generically for a pop-up box for textual messages. The cookie management is more complex.

Personally, I use a free third part javascript for this feature: Cookie-bar.eu

I’m not affiliated in any way to that site, so read their page and value by yourself. To me, they works.

Bye!