asked on

Adding a lightbox to a web page

HI Experts,

I want to add a lightbox popup to the home page of a site I am working on. The popup will contain a Mailchimp form. Mailchimp has their own popup forms -- but their cookies prevent the popup from showing again for at least 7 days, as I understand it. My client wants the popup to show more often. Either once a day or -- whenever. So I am seeing if a custom popup can deal with this issue.

Here's the website, work in progress: website

In addition to the lightbox, There needs to be an "X" out of the lightbox in case the person does not want to subscribe.

Once the lightbox gets working, we will see if the box will close automatically after the submit button is selected. There may need to be some additional js (?) code added to get the lightbox to close upon the submit button being activated...???

Not sure if any of this will work because of Mailchimp's technology. But I'd like to get it working if possible.

Here's the Mailchimp code that will be in the lightbox.

<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
	#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
	/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
	   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="//gizmoproducts.us1.list-manage.com/subscribe/post?u=3e3905b6089c6053c57a7be40&id=9cb1d31597" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
	<h2>For special deals and discounts join our newsletter </h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
	<label for="mce-EMAIL">Email Address  <span class="asterisk">*</span>
</label>
	<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
	<div id="mce-responses" class="clear">
		<div class="response" id="mce-error-response" style="display:none"></div>
		<div class="response" id="mce-success-response" style="display:none"></div>
	</div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_3e3905b6089c6053c57a7be40_9cb1d31597" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->

Open in new window

Thanks!
Rowby

Scott Fell

You can either create a form using mail chimp with their wizard http://kb.mailchimp.com/lists/signup-forms/host-your-own-signup-forms or completely roll our own form and submit using the api
https://apidocs.mailchimp.com/api/how-to/basic-subscribe.php.

From there you only need to place your form code into a modal or whatever you are using as your pop up.

Rowby Goren

ASKER

Hi Scott

Thanks for jumping in. I've decided to just make a separate popup box with a link to another page which would have the standard Mailchimp form code (rather than using any mailchimp popup).

I found this js code which I understand would be placed in the head. It is used on this site: Site using the below code....

I'm not married to it, but do you recommend it -- and how I would then "link" it to a modal.....

// Popup Modal
    popupModal: function () {
      // Opens Modal
      function openModal() {
        var $modal = $('#myModal'),
            $form = $('#popup-hb-form');

        if ($modal.length != 0 && $( window ).width() > 480) {
          $modal.reveal({
            // Removes class hidden from form,
             // so the form is visible once modal is open.
            open: function () {
              $form.removeClass("hidden");
            },
            // If modal is closed, hides form,
            // for button not to stick on close animation.
            close: function () {
               $form.addClass("hidden");
            }
          });
        }
      }

      //Modal Cookie Validator (POPUP LANDING PAGE, once per month)
      // Comment if it needs to appear in every visit.
      if ($.cookie('newvisited') != 'petngo-new') {
        $.cookie('newvisited', 'petngo-new', { expires: 30, path: '/' });
        
          setTimeout(function () { openModal(); }, 60000);
        
      }

      // Turn on when modal needs to appear in every visit.
      // Comment if popup must be shown just once.
      /*
      // Get previous URL
      var prevURL = document.referrer;

      // If previous page was on same domain, do not show the intro again
      if (prevURL.indexOf("petngo") < 0) {
        openModal();
      }
      */

      // Trigger MODAL on side tab click.
      
        $('.discount-tab').click(function (){
          openModal();
        });
      

      /// ICE9 CUSTOM

      /*
      $(document).ready(function() {
        
      });
      */

      if (Cookies.get('popupGalleta') == 'activado') {
          console.log('Galleta ON');
        } else {
          
          ModalPop = false;
          $( "body" ).mouseleave(function() {
            
            if (ModalPop == false) {
              console.log('Mouse Out!');
              ModalPop = true;  
              openModal();
              Cookies.set('popupGalleta', 'activado', { domain: 'petngo.com.mx' });
            }
            
          });

          console.log('Galleta OFF');
        }

    },

    initialize: function() {
      indexJS.gaTrackEvents();
      indexJS.indexFlexslider();
      indexJS.popupModal();
    }

  }

  indexJS.initialize();

})();
    
    
    
    

  });
</script>

Open in new window

ASKER CERTIFIED SOLUTION

Scott Fell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Rowby Goren

ASKER

Hi Scott.
Looking good. Getting there

(BTW it's a Shopify site, not Square Space -- the SquareSpace was just an example. Sorry for not making that clearer...)

Here's what remains

1) The popup needs to be auto popup, not via a click. Perhaps after 5 seconds, for example.
2) I need a way to set a cookie for either 1 day, 2 days etc. So it won't show again to the same visitor at least for another day or so...

Other than that, the popup works fine! BTW I eliminated the "content". YOu'll see the link to open the popup at the very bottom of the page.

Rowby

Scott Fell

There seems to be an error on your page.

  $.shifter({
    maxWidth: "740px"
  });

Open in new window

I have what could be an end result showing a progression in 3 steps. The final step at the bottom sets a cookie and it expires for 2 days. If you escape the top line to delete the cookie for testing, it will show up again once the cookie is set.

I have a link to w3schools for a client side cookie and used the functions from that page almost as is. I think this should set you on the right path.

For my sample, to make the modal show up on page load, take away the click event and you will see it shows up.

http://jsbin.com/bupijuvifi/1/edit?html,output

  <script>
    $(function(){
      
  
     // show the modal with id modalTest at page load
    $('#modalTest').show();

  
      // detect the click for link or button inside the modal (or anywhwere) with class .closeModalTest
  $('.closeModalTest').on('click',function(){
    // hide the modal
    $('#modalTest').hide();
  });
  
});

Open in new window

For cookies, you can use a server side language or client side http://www.w3schools.com/js/js_cookies.asp

Working sample
http://jsbin.com/pepukomuro/edit?html,output

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script>
    



$(function(){
  // create cookie named showEmailModal and give value of 1 and expire in 2 days
   setCookie("showEmailModal",1,2);
  
  // get cookie named showEmailModal and place in variable named test
   test = getCookie("showEmailModal");  
  
  // use jquery to place varialbe test in id results
  $('#results').text(test);
  
});

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) === 0) return c.substring(name.length,c.length);
    }
    return "";
}
  </script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>EE 28925771 - 2</title>
</head>
<body>
  <div id="results"></div>
</body>
</html>

Open in new window

Finally, put it all together
http://jsbin.com/xakajatiso/1/edit?html,output

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script>
    

$(function(){
 
  // Delete cookie for testing
 // document.cookie = "showEmailModal=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
  
     // detect the click for link or button inside the modal (or anywhwere) with class .closeModalTest
  $('.closeModalTest').on('click',function(){
    // hide the modal
    $('#modalTest').hide();
  });
  
  
  // check if modal cookie exists
  checkModalCookie();
  
  function checkModalCookie() {
    var isModal=getCookie("showEmailModal");
    
    if (isModal!=="") {
        // cookie exists, do nothing or something else
     
    }else{
      
         // create cookie named showEmailModal and give value of 1 and expire in 2 days
      
      // show modal
      // show the modal with id modalTest at page load
    $('#modalTest').show();
     setCookie("showEmailModal",1,2);
  
    }
}
  
  

  
});

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) === 0) return c.substring(name.length,c.length);
    }
    return "";
}


  </script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>EE 28925771 - 3</title>
   <style>
    /*Very basic modal for testing only  */
    .modal{
      background-color:pink;
      border:solid;
      padding:10px;
      width:60%;
      height: 100px;
      text-align:center;
      position: fixed;
      top: 5%;
      left: 20%;
      z-index: 9999;
      box-shadow: 10px 10px 5px #888888;
      
      /*Hide modal at start  */
      display:none;
     
      
    }
  </style>
</head>
<body>
  <!-- some content in your body -->
  <div class="main">
    <p>This is my main content.</P>
    <p>This is my main content.</P>
    <p>This is my main content.</P>
    <p>This is my main content.</P>
    <p>This is my main content.</P>
    <p>This is my main content.</P>
    <p>This is my main content.</P>
    <p>This is my main content.</P>



<!-- this is your modal content. It is hidden via css -->
<div id="modalTest" class="modal">
  <p>I am hidden until you open me</p>
  <!-- you can place your own form here -->
  <form action="">
    <!-- 
      You can either set the form action for another page or leave plank for current page
      or use javascript or jquery to submit the form via ajax (don't forget to close the modal)
    -->
    <input name="email" placeholder="email">
    <button type="submit">Submit</button>
  </form>
  <p> <a href="javascript:void(0)" class="closeModalTest">Close</a></p>
</div>

</body>
</html>

Open in new window

Scott Fell

I think the error I posted should be

http://api.jquery.com/css/
$(".shifter").css("maxWidth", "740px");

Rowby Goren

ASKER

Hi Scott

(BTW: Does this error still exist in my script -- or is it fixed now???/$(".shifter").css("maxWidth", "740px");

In any case.....
This is what I have now in my head

  
 <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script>
    



$(function(){
  // create cookie named showEmailModal and give value of 1 and expire in 2 days
   setCookie("showEmailModal",1,2);
  
  // get cookie named showEmailModal and place in variable named test
   test = getCookie("showEmailModal");  
  
  // use jquery to place varialbe test in id results
  $('#results').text(test);
  
});

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) === 0) return c.substring(name.length,c.length);
    }
    return "";
}
  </script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>EE 28925771 - 2</title>
</head>

Open in new window

And this is right before my </body> tag:

<!-- some content in your body -->
  <div class="main">



<!-- this is your modal content. It is hidden via css -->
<div id="modalTest" class="modal">
  <p>I am hidden until you open me</p>
  <!-- you can place your own form here -->
  <form action="">
    <!-- 
      You can either set the form action for another page or leave plank for current page
      or use javascript or jquery to submit the form via ajax (don't forget to close the modal)
    -->
    <input name="email" placeholder="email">
    <button type="submit">Submit</button>
  </form>
  <p> <a href="javascript:void(0)" class="closeModalTest">Close</a></p>
</div>


  
</body>
</html>

Open in new window

Link to site

I see the modal content at the bottom of the page, instead of in a popup modal.

BTW I just noticed the following "Fancybox " also in the head. A few lines before your code. Maybe there's a conflict -- or we can use this instead of what you have????? Or, I could delete the code

  <script type="text/javascript">
    if($(window).width() > 500){
      // Fancybox Join our mailing list popup
      $(document).ready(function(){

        var check_cookie = $.cookie('mailing_list_popup');
        if(check_cookie == null){
          $.cookie('mailing_list_popup', 'expires_seven_days', { expires: 7 });
          //fire your fancybox here
          $.fancybox({
            href: "#subscribe_popup"
          });
        }
      }); 
    };

  </script>

Open in new window

SOLUTION

Scott Fell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Scott Fell

Forgot, did you add the CSS I used for the modal?

Scott Fell

I could be wrong on the shifter. That could be a plug in. Do you know what it is for?

Rowby Goren

ASKER

Hee hee

Hi Scott. I'll try to check that out tonight.

Rowby

Rowby Goren

ASKER

Hi Scott,

My client is showing the site to some people on Friday, so I am holding off adding the popup until after Friday.

So resuming Saturday.

Rowgy

Scott Fell

Ok. I may not be around much over the weekend.

Rowby Goren

ASKER

Hi Scott

As it turned out the client is now using a plugin to do the lightbox...!

In any case, thanks for helping me troubleshoot this -- and understand, in general, issues and solutions to light boxes.

Rowby

Rowby Goren

ASKER

Thanks, Scott!

Rowby