jQuery Modal PopUp Only Once

On this page. You’ll be presented with a location to select. Select any one.

There is an e-blast popup that seems to repeatedly pop up on every page of the site (give it about five seconds). I only want it to pop up once per session. There is a cookie code to restrict the session, but I’m wondering with the new updated browsers that the code no longer works.

The e-blast is dependent upon the location chosen. Meaning, if you choose one location then there’s an e-blast for that particular location.

jQuery Cookie is being loaded, based upon the script source. Not sure if using localStorage would do any better.

I will assume by “e-blast” you mean the “Join our eclub” popup.
First of all, the site is belching 404’s. Couple of your image and CSS files are missing.
Second of all, the modal’s appearance is based on line 958 of your page. You seem to be invoking the modal with no discernible check on anything in the cookie that would indicate someone has already seen the modal. Perhaps a cookie-write when they close the modal?

As much as I appreciate your time in pointing that out, m_hutley, I was not given the opp to fix those right now. Just the one issue. If you’re able to assist me in understand why the cookie isn’t working, I would appreciate your time.

<script type="text/javascript">
        $(document).ready(function(){
         setTimeout( function doSomething() { 
          if (typeof $.cookie('location') !== 'undefined'){
            if($.cookie('location')=='grand-fruita'){
                $('#yikes-mailchimp-container-4').show();
                $('#yikes-mailchimp-container-3').hide();
            }else{
               $('#yikes-mailchimp-container-4').hide();
                $('#yikes-mailchimp-container-3').show();
            }
               $("#myModal1").modal('show');

            }else{
                setTimeout(doSomething, 10000);
            }
         
         },10000); 
            $(".grand-junction").click(function(){
                //$(".bimggrandjunction").show();
                 $(".bimgfrutia").hide();
                 $('#yikes-mailchimp-container-4').hide();
                 $('#yikes-mailchimp-container-3').show();
    $(".grand-frutia").click(function(){
            $('#yikes-mailchimp-container-4').show();
            $('#yikes-mailchimp-container-3').hide();
<div class="modal fade" id="myModal1" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content join-club-pop">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">join club</h4>
        </div>
        <div class="modal-body">

                 <?php echo do_shortcode('[yikes-mailchimp form="3"]'); ?>

                 <?php echo do_shortcode('[yikes-mailchimp form="4"]'); ?>

        </div>

      </div>
      </div>
      </div>

(Inline comments for my reading of the code.)
So the current code just says “If they’ve chosen a location, show them the eclub stuff when this function gets called.”
We want to remove that if they’ve already seen the modal. Well, we have to determine if they’ve seen the modal already. We’re already writing a cookie to their browser to store the location setting (which, incidentally, future feature to consider would be the ability to CHANGE the location)…

			   Cookies.set('location'), true);

(line 1246) [though that line has a typo in it now? Unexpected ) error]
[for the record, my line numberings are from the output, since i cant see your code, obviously]

modal.js is hiding how the close button works on your modal, but you can use jQuery to hunt it down and stick a click trigger on it (as well as the Submit buttons, because those count as closing the form as well)

$("#myModal1 button").on("click",function() { Cookies.set('shownclub',true); });

and then inside the if block above, instead of nakedly calling the show modal check to see if ‘shownclub’ is true (or more likely, if it’s NOT true, show the modal).

Well I wish I was able to see what you were seeing, since our output of row numbers is different, and I get a little lost in your translation.

Basically you’re telling me that the location cookie is there but the ability to disable the modal upon ‘close’ or upon the user already visiting the site, correct? And then the only way of knowing is to modify the ‘close’ trigger button? With that, also add a check if the ‘shownclub’ (don’t know where you go this term) is set to ‘false’ then show the modal, yes?

Clarify if I’m wrong.

I’m not all too familiar with the coding of jQuery, but I am gaining a better understanding of your inline comments regarding how this was structured.

Correct.
The cookie is being set to define the location. So SOMEWHERE in your code, you’ve got that set up. I don’t actually think it’s setCookie, because that function isnt in scope for me by the time the page loads. Somewhere, you’ve told the site ‘make a cookie with location set to whatever button they pushed.’
So what we need to do is not -change- the behavior of the close (and submit) buttons of the ‘join the eclub’ modal (because we still want them to do their thing), but instead tack a little extra code onto them that says 'When they push one of these things, stick another cookie into the browser, that says they’ve seen the modal [they’ve either closed it uninterested, or filled out the form and hit the submit button].
Then, when the page gets reloaded, we check to see if they’ve seen the modal by seeing if the cookie is there. If they have, we dont show it again.

Not sure if this helps:

   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="<?php echo get_template_directory_uri();?>/js/bootstrap.min.js"></script>
     <script src="<?php echo get_template_directory_uri();?>/js/jquery.cookie.js"></script>
     <style type="text/css">
        .imggrandjunction{
            display: none;
        }
        .imgfrutia{
            display: none;
        }
      .fruit-title-02{
            display: none;
        }
    .fruita-important-01{
            display: none;
        }
    .fruita-news-02{
            display: none;
        }
    .beer_fruitacon{
            display: none;
        }
        #pablo-fruita-insta{
          display: none;
        }
    
    #yikes-mailchimp-container-4{
      display: none;
    }
    .yikes-easy-mc-birthday ,.yikes-easy-mc-email {
      color: #000;
    }
    </style> 
    <script type="text/javascript">
        $(document).ready(function(){
         setTimeout( function doSomething() { 
          if (typeof $.cookie('location') !== 'undefined'){
            if($.cookie('location')=='grand-fruita'){
                $('#yikes-mailchimp-container-4').show();
                $('#yikes-mailchimp-container-3').hide();
            }else{
               $('#yikes-mailchimp-container-4').hide();
                $('#yikes-mailchimp-container-3').show();
            }
               $("#myModal1").modal('show');

            }else{
                setTimeout(doSomething, 10000);
            }
         
         },10000); 
            $(".grand-junction").click(function(){
                //$(".bimggrandjunction").show();
                 $(".bimgfrutia").hide();
                 $('#yikes-mailchimp-container-4').hide();
                 $('#yikes-mailchimp-container-3').show();

        document.getElementById('insta-social-link').innerHTML='<a href="https://www.instagram.com/explore/locations/4560950/" target="_blank"><img src="https://www.pablospizza.com/wp-content/themes/pablopizza/images/instagram.png" alt="img"></a>';
        document.getElementById('fb-social-link').innerHTML='<a href="https://www.facebook.com/pablospizza/" target="_blank"><img src="https://www.pablospizza.com/wp-content/themes/pablopizza/images/facebook.png" alt="img"></a>';
         $("#pablo-fruita-insta").hide();
        $("#pablo-gj-insta").show();

         $(".son-title-01").show();
         $(".fruit-title-02").hide();

         $(".valid-son-btn").show();
         $(".valid-fruita-btn").hide();
         
         $(".grand-news-01").show();
         $(".fruita-news-02").hide();
         
         $(".grand-important-01").show();
         $(".fruita-important-01").hide();
          
         $(".beer_grandjun").show();
        $(".beer_fruitacon").hide();  
          
                 $(".imggrandjunction").show();
                 $(".imgfrutia").hide();
                 $("#myModal").modal('hide');
                 var data = {
                  'action': 'image_action1',
                  'imgval': 'grand-junction'
                };
        var popc = $( ".order-now a" );   
        if(!popc.hasClass( "eModal-1" )) {
        $(".order-now a").removeClass( "eModal-2" );  
        $(".order-now a").addClass( "eModal-1" );   
        }       
        
        var now = new Date();
        var time = now.getTime();
        time += 30*24*60*60*1000;
        now.setTime(time);
        document.cookie = 
        'location=grand-junction' + 
        '; expires=' + now.toUTCString() + 
        '; path=/';
          
                var ajaxurl = '<?php echo admin_url( 'admin-ajax.php' );?>';

                // since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php

               // jQuery.post(ajaxurl, data, function(response) {
          //});
        });
      
            $(".grand-frutia").click(function(){
            $('#yikes-mailchimp-container-4').show();
            $('#yikes-mailchimp-container-3').hide();

        document.getElementById('insta-social-link').innerHTML='<a href="http://instagram.com/pablosfruita/" target="_blank"><img src="https://www.pablospizza.com/wp-content/themes/pablopizza/images/instagram.png" alt="img"></a>';
        document.getElementById('fb-social-link').innerHTML='<a href="https://www.facebook.com/pablospizzafruita/" target="_blank"><img src="https://www.pablospizza.com/wp-content/themes/pablopizza/images/facebook.png" alt="img"></a>';
         $("#pablo-fruita-insta").show();
         $("#pablo-gj-insta").hide();

         $(".son-title-01").hide();
         $(".fruit-title-02").show();

         $(".valid-son-btn").hide();
         $(".valid-fruita-btn").show();
         
         $(".grand-news-01").hide();
         $(".fruita-news-02").show();
         
         $(".beer_grandjun").hide();
         $(".beer_fruitacon").show(); 
         
          $(".grand-important-01").hide();
         $(".fruita-important-01").show();

                $(".bimggrandjunction").hide();
                 //$(".bimgfruita").hide();
                $(".imgfrutia").show();
                $(".imggrandjunction").hide();
                $("#myModal").modal('hide');
                var data = {
                  'action': 'image_action2',
                  'imgval': 'grand-fruita'
                };
        var now = new Date();
        var time = now.getTime();
        time += 3600 * 1000;
        now.setTime(time);
        document.cookie = 
        'location=grand-fruita' + 
        '; expires=' + now.toUTCString() + 
        '; path=/';
        
        var popc = $( ".order-now a" );   
        if(!popc.hasClass( "eModal-2" )) {
        $(".order-now a").removeClass( "eModal-1" );  
        $(".order-now a").addClass( "eModal-2" );   
        } 

              //  var ajaxurl = '<?php echo admin_url( 'admin-ajax.php' );?>';
                // since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php
               // jQuery.post(ajaxurl, data, function(response) {
          // });

            });
        });
    
    </script>
  

    </script>

    <script type="text/javascript">
        $(document).on("scroll", function() {
            if ($(document).scrollTop() > 200) {
                $("left-logo").removeClass("large").addClass("small");
            } else {
                $("left-logo").removeClass("small").addClass("large");
            }
        });
    
    function getCookie(sKey) {
      if (!sKey) { return null; }
      return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
    }
    

    </script>
    <script type="text/javascript">
        $(document).ready(function() {

            if (typeof $.cookie('location') === 'undefined'){
                        $("#myModal").modal('show');
            } 
        });
       /* $(document).ready(function() {
              $(".lft-menu-btn").click(function(){

            $("#location").modal('hide');
                    });
                    $("a[href*=http://localhost/pablopizza/#location").click(function(e) {
    $("#myModal").modal('hide');
});

        });*/

        $(function(){
  $('.menu-list').click(function(){
    $("#myModal").modal('hide');
  });
});
    </script>

    <script>
    $(document).ready(function(){
    $(".lft-menu-btn").click(function(){
        $(".left-menu").toggle();
    });
    });
    </script>
    <script type="text/javascript">
      /*$(document).ready(function(){
        $(".joinclub-list").click(function() {
    $('html,body').animate({
        scrollTop: $(".stay-connected-red").offset().top},
        'slow');
});
      });*/
       $(document).ready(function() {
        $(".joinclub-list").click(function() {
            $("#myModal1").modal('show');
         });
        });

    </script>
 
 

 <div id="largeModal" class="modal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-body">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&nbsp;</button>
                    <div class="row">
                        <div class="col-md-8 col-sm-8">
                          <h2>PiCK A LOCATiON</h2>
                          <p>
                        <button class="grand-junction">GRAND JUNCTION</button>
                        </p>
                        <p>
                          <button class="grand-fruita">Hello</button>
                        </p>
                        </div>
                        <div class="col-md-4 col-sm-4">
                            <img src="images/maskot.jpg" alt="img">
                        </div>


                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="lft-menu-btn">
        <span>Menu</span>
    </div>


    <div class="container">

  <div class="modal fade" id="myModal1" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content join-club-pop">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">join club</h4>
        </div>
        <div class="modal-body">

                 <?php echo do_shortcode('[yikes-mailchimp form="3"]'); ?>

                 <?php echo do_shortcode('[yikes-mailchimp form="4"]'); ?>

        </div>

      </div>

    </div>
  </div>

</div>

Ah there we go.
So, lets use that same code in this instance.
In between these two lines:

         },10000); 
            $(".grand-junction").click(function(){

stick this:

$("#myModal1 button").on('click',function() {
        var now = new Date();
        var time = now.getTime();
        time += 30*24*60*60*1000;
        now.setTime(time);
        document.cookie = 
        'shownmodal=true' + 
        '; expires=' + now.toUTCString() + 
        '; path=/';
});

and then up above those lines where it says

 }
               $("#myModal1").modal('show');

            }else{
                setTimeout(doSomething, 10000);

instead:

}
     if ($.cookie('shownmodal') === 'undefined') {
          $("#myModal1").modal('show');
     }

            }else{
                setTimeout(doSomething, 10000);

So something like this:

<script type="text/javascript">
        $(document).ready(function(){
         setTimeout( function doSomething() { 
          if (typeof $.cookie('location') !== 'undefined'){
            if($.cookie('location')=='grand-fruita'){
                $('#yikes-mailchimp-container-4').show();
                $('#yikes-mailchimp-container-3').hide();
            }else{
               $('#yikes-mailchimp-container-4').hide();
                $('#yikes-mailchimp-container-3').show();
           }
			 if ($.cookie('shownmodal') === 'undefined') {
				  $("#myModal1").modal('show');
			 }

            }else{
                setTimeout(doSomething, 10000);
            }
         
         },10000); 
		 
		$("#myModal1 button").on('click',function() {
        var now = new Date();
        var time = now.getTime();
        time += 30*24*60*60*1000;
        now.setTime(time);
        document.cookie = 
        'shownmodal=true' + 
        '; expires=' + now.toUTCString() + 
        '; path=/';
		});
		
            $(".grand-junction").click(function(){
                //$(".bimggrandjunction").show();
                 $(".bimgfrutia").hide();
                 $('#yikes-mailchimp-container-4').hide();
                 $('#yikes-mailchimp-container-3').show();

That looks correct to me. Track the cookie, and give it a test run.

Okay. Experiencing the Join the Club isn’t even popping up for the first time. I checked with a variety of browsers, cleared the caches. After I select the location, no pop up to join the club.

That… would be because i’m a derp. === is a type-specific matcher, and undefined is a keyword type, not a string to be matched against.

			 if ($.cookie('shownmodal') === 'undefined') {

=>

			 if ($.cookie('shownmodal') === undefined) {

OR

         if (typeof $.cookie('shownmodal') === 'undefined'){

(because typeof renders the undefined INTO a string that can be matched against)

The Javascript on the current version of the page is borking out on line 1194 because you missed a { on line 1190.

			 if ($.cookie('shownmodal') === undefined)

=>

			 if ($.cookie('shownmodal') === undefined) { //Note here.
1 Like

It did have that in the code, actually. I think it was the caching not clearing from the site. All is great now, m_hutley! Awesome!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.