Show modal only once per visit

[Macrura]

I have a client who wants to have a modal pop up box (i'm using the Zurb 'Reveal' jquery plugin for it) on their homepage, but they only want it to appear once per visit, so if the user clicks back to the homepage, they don't get the pop up again.

Just wondering if anyone has any idea how to do this with php/processwire, or should i be using jquery cookies?

Thanks,

Marc

[diogo]

you can use session for this. Something like this should work:

if($page->template == "home"){
   if($session->noPop){
       // No popup
   }else{
       // Go popup!!
   }
}else{
   if(!$session->noPop){
       $session->noPop = 1;
   }
}

[Macrura]

Hi diogo - thanks for the code - i tried it but couldn't get it to work, though i think i understand what this is doing; what if a visitor lands on an inside page, but then clicks to the homepage;

i think i need to setup a session variable when the visitor lands on the homepage, which can be compared when they come back a 2nd time...?

-marc

[netcarver]

Hmmm. Does this work?..

if($page->template == "home") {
   if($session->noPop){
       // No popup
   }else{
    // Go popup...

	 // But don't do it next time...
	 $session->noPop = true;
   }
}

[diogo]

You're right, sorry... I understood wrong and complicated the simple. Try this on the home template:

if(!$session->noPop){
echo "POP!";
$session->noPop = 1;
}

edit: netcarver beat me to it

[Macrura]

thanks netcarver & diogo - it's working and so simple to implement with PW.

this is what i ended up with:

<?php  if(!$session->noPop){
           include("./popup.inc");
           $session->noPop = 1;
       } ?>

-marc

[Soma]

Oneliner alarm

<?php if(!$session->noPop) include("./popup.inc"); $session->noPop = 1; ?>

No intendation

[Macrura]

@soma - advice taken !

thanks

-marc

[Christophe]

Hello,

For a ProcessWire 2.7.2 website, I need to add a Disclaimer pop-up when the homepage is loaded.

I'm using UIkit, and so I want to use the modal componant: http://getuikit.com/docs/modal.html

I'll try to create a pop-up with several options from this modal.html web page.

Do you think

<?php if(!$session->noPop) include("./popup.inc"); $session->noPop = 1; ?>

would still work?

What is noPop, is it in the core?

I guess I could also use something like _popup.php or _disclaimer.php.

Where is the best place to insert it? At the top of the homepage template file?

And what if I have a hidden Disclaimer page in the back-end?

Has someone already done it with UIkit?

When a visitor clicks on the "validation" button, the modal has to disappear of course.

Thanks in advance for your help!

[LostKobrakai]

noPop is not in the core, it's just a random key to give to the session variable. It's the same as $session->get("noPop");

[Christophe]

Ok. Thanks. I was wondering if it could be anything else.

I have added some code in a _disclaimer.php file and in home.php.

But, I'm now trying to make the modal dialog work (like on the modal.html page) in the homepage itself first.

For the moment, I'm not sure how to make the modal dialog appear on top of the homepage at page load.

And if I'll need to hide the "open" button, or won't need it at all.

[Macrura]

wow the original post was like 3 years ago...

i think if i was doing this now i would probably go with javascript cookie, since i tend to do a lot more server side caching over the last years;

[Christophe]

Hello,

I have the code:

<?php

// This is an anchor toggling the modal
echo "<a href=\"#disclaimer\" data-uk-modal=\"{bgclose:false,center:true}\">Open</a>";

// This is the modal
echo "<div id=\"disclaimer\" class=\"uk-modal\"><div class=\"uk-modal-dialog\">";
echo "<div class=\"uk-modal-header uk-text-center\"><h1>{$pages->get('/informations/disclaimer/')->title}</h1></div>";
echo $pages->get('/informations/disclaimer/')->body;
echo "<div class=\"uk-modal-footer uk-text-center\"><a class=\"uk-modal-close\">OK</a></div></div></div>";

?>

It works as in modal.html if inserted in home.php.

But of course, I need the modal dialog to appear when the homepage loads, and the "Open" link to be hidden, for example.

And, if the visitor comes back on the homepage, I guess it's better if he doesn't see it again (cookie, session...?).

How could I do this (where to put the code(s), etc.)? I've never done such a thing myself.

[Christophe]

Ok, so now I have this at the bottom of home.php:

<?php

// This is an anchor toggling the modal
echo "<a id='dc' href=\"#disclaimer\" data-uk-modal=\"{bgclose:false,center:true}\">Open</a>";

// This is the modal
echo "<div id=\"disclaimer\" class=\"uk-modal\"><div class=\"uk-modal-dialog\">";
echo "<div class=\"uk-modal-header uk-text-center\"><h1>{$pages->get('/informations/disclaimer/')->title}</h1></div>";
echo $pages->get('/informations/disclaimer/')->body;
echo "<div class=\"uk-modal-footer uk-text-center\"><a class=\"uk-modal-close\">OK</a></div></div></div>";

?>
        
<?php include('./_foot.php'); // include footer markup ?>

<script>
jQuery(document).ready(function($) {  
    $.UIkit.modal('#disclaimer').show();  
});
</script>

It works well apparently.

I still need it not to bother the visitor if he/she comes back on the homepage: cookie, session...

Does somebody know how to do this?

[bernhard]

I was really surprised why you are asking this when you are developing awesome modules with ajax field reloading at the same time

[Christophe]

I've just copied it from https://yootheme.com/support/question/79225 after having done a quick search .

This time I haven't really tried to understand (for the moment) what I've copied.

It's all new to me.

Perhaps it's easy to add some thousand seconds before it "reloads" again?

"I was really surprised why you are asking this when you are developing awesome modules with ajax field reloading at the same time"

Are you talking about the last "script" I added? Or are you talking about another Christophe?

NB: I've changed the script to

(function($) {  
    $.UIkit.modal('#disclaimer').show();
}(jQuery));

as it is at the very bottom of the page.

[Christophe]

I've tried with this code:

<script>
(function($) {
    if (localStorage.getItem("isdisclaimerloaded") === null) {
        $.UIkit.modal('#disclaimer').show();
    }
    localStorage.setItem('isdisclaimerloaded', 1);
}(jQuery));
</script>

It seems to work. But after clearing the cache and reloading the page what happens is that the "Open" link that is normally hidden (#dc {display: none;) appears at the top left corner of the browser window.

In fact, id='dc' is not longer in the anchor tag at that moment. It is removed apparently.

The page has to be reloaded a second time for it to disappear. It works also when going on another page and coming back of course.

It seems "logical" because of the #disclaimer id.

Any "trick" to not have the link visible on the first page load?

NB: cookies would perhaps be better for "old" browsers

Edit: I have "Uncaught SyntaxError: Unexpected identifier".
At least with webkit browsers.

I'm adding

a[href='#disclaimer'] {display: none; color: transparent;}

I also want to simply remove the "Open" text between the anchor tags but it doesn't seem to want to disappear in the developer tools (for the moment).

[Christophe]

Forget (almost) everything I've said :/.

It was because I had forgotten that I still had

<?php if(!$session->noPop) include("./_disclaimer.php"); $session->noPop = 1; ?>a#dc {display: none; color: transparent;}

at the top of home.php. I don't know if it's "good" to mix this with the "script".

I was not fixing the correct "version" of the code.

I've added the #dc id in _disclaimer.php and have removed the same code in home.php.

I'll use a#dc instead of a[href='#disclaimer']:

a#dc {display: none; color: transparent;}

I've removed "Open".

NB: not enough sleep apparently these last days...

[Christophe]

_disclaimer.php is now:

<!-- This is an anchor toggling the modal -->
<a id='dc' href="#disclaimer" data-uk-modal="{bgclose:false,center:true}"></a>

<!-- This is the modal -->
<div id="disclaimer" class="uk-modal"><div class="uk-modal-dialog">
<div class="uk-modal-header uk-text-center"><h1>
<?=$pages->get('/information/disclaimer/')->title?>
</h1></div>
<?=$pages->get('/information/disclaimer/')->body?>
<div class="uk-modal-footer uk-text-center"><a class="uk-modal-close">OK</a></div></div></div>

And

<script>
(function($) {
    if (localStorage.getItem('isdisclaimerloaded') === null) {
        $.UIkit.modal('#disclaimer').show();
    }
    localStorage.setItem('isdisclaimerloaded', 1);
}(jQuery));
</script>

is now in scripts/disclaimer.js

I don't know why the modal doesn't want to center vertically as it should.

[hansv]

I have a similar question for my Home page.  My Zurb Foundation 5 reveal modal page is showing on my home page.  When reloading or view another page, the modal page stays as empty page.  It never disappears as it should be!   You can see this at orgelpijpjes.be .

My code:

<link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">

<div id="modalwin" class= "reveal-modal tiny" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">   
  <?php 
       if(!$session->noPop){
            echo $pages->get("/inthepicture/baie-musiek")->body; 
            $session->noPop = 1;
        }
  ?>
  <a class="close-reveal-modal" aria-label="Close">×</a>
</div>

$(document).foundation();
$('#modalwin').foundation('reveal','open');

[hansv]

Oops ... 

Problem solved!  Code beneath should be in home.php and not in _main.php

Sorry for this rather stupid mistake!

<div id="modalwin" class= "reveal-modal tiny" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">  
  <?php 
if(!$session->noPop){
            echo $pages->get("/inthepicture/baie-musiek")->body; 
            $session->noPop = 1;
        }
?>
  <a class="close-reveal-modal" aria-label="Close">×</a>
</div>