Jump to content

Show modal only once per visit


Macrura
 Share

Recommended Posts

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

Link to comment
Share on other sites

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;
   }
}
Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 3 years later...

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

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.

Link to comment
Share on other sites

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).

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

_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.

Link to comment
Share on other sites

  • 3 months later...

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');
Link to comment
Share on other sites

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>
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...