Jump to content
Macrura

Show modal only once per visit

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

Share this post


Link to post
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;
   }
}

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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;
   }
}
  • Like 1

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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

  • Like 2

Share this post


Link to post
Share on other sites

Oneliner alarm :D

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

No intendation :P

  • Like 3

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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");

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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;

  • Like 1

Share this post


Link to post
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.

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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.

Share this post


Link to post
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).

Share this post


Link to post
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...

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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');

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Majesrse
      Hey i have a problem with the code:
      $('a').click(function(link) { link.preventDefault(); location = this.href; $('body').fadeOut('slow', open); }); function more() { window.location = location; } It's writen in Jquery but i will convert it to vanilla js. Can somone help me with it?
    • By MarkE
      This post is related to 
      but is a different way of tackling the problem.
      The idea is to use the JqueryUI.module in the front end to present a restricted access admin page in a modal (class pw-modal). However the JqueryUI module doesn't seem to work properly in the front end (I have it working in the back end OK). I'm guessing that this is because the front end page has not loaded all the .js that is needed (that would normally be loaded in the back end). My _main.php loads the following from the core at the moment:
      'wire/modules/AdminTheme/AdminThemeUikit/uikit/dist/js/uikit.min.js' 'wire/modules/AdminTheme/AdminThemeUikit/uikit/dist/js/uikit-icons.min.js' 'wire/modules/Jquery/JqueryCore/JqueryCore.js' 'wire/modules/Jquery/JqueryUI/JqueryUI.js' Any ideas what else I need, or have I got hold of the wrong end of the stick?
    • By eschoonen
      I'm working on the threaded comments on my website and for this I need to include the comments.js
      When I do this it keeps on giving me the "Uncaught ReferenceRrror: jQuery is not defined". Whatever I do it keeps giving me this error message.
      It's the last javascript file that I load in. So how do I fix it?
    • By SwimToWin
      ProcessWire is setting a "wires" cookie for each guest session.
      Is it possible drop that cookies, so there are no cookies at all for guests?
      That way, I don't need to spam the user with a cookie consent box.
      I don't need cookies for user preferences and marketing purposes.
      (Why are cookies being set by default in the first place?)
×
×
  • Create New...