Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

johnrice

Circle Member
  • Content Count

    24
  • Joined

  • Last visited

  1. This works perfectly! Not sure how I missed this before.
  2. Here's how I accomplished it. It's a little cumbersome, but works perfectly for my needs. This approach requires the jQuery Cookie plugin – you can either host it externally, or just paste the code into your Code Injection as explained below. (Get the plugin here.) First, paste the contents of jquery.cookie.js between two script tags in your Code Injection: <script> // contents of jquery.cookie.js go here </script> Followed by some HTML: <div id="ageWrapper"> <div id="agePopUp"> <h2>Are you at least 21?</h2> <a href="#" id="ageOkay">Yes</a> <a href="#" id="ageBad">No</a> </div> </div> And then some jQuery: <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(document).ready(function(){ // put the popup at the start of the body $('#ageWrapper').prependTo($('body')); // check if the age has already been verified if (($.cookie('age')) !== 'true') { $('#ageWrapper').addClass('ageUnknown'); } // if the "yes" button is clicked, add a cookie and hide the popup $('#ageOkay').click(function() { $.cookie('age', 'true', { expires: 1, path: '/' }); $('#ageWrapper').removeClass('ageUnknown'); }); // if the "no" button is clicked, take the user elsewhere $('#ageBad').click(function() { window.location.href='http://www.hasbro.com/mylittlepony/en_US/'; }); }); </script> Finally, some styles for the Custom CSS: #ageWrapper { visibility: hidden; opacity: 0; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 9000; background-color: rgba(32,23,19,.7); transition: visibility 0s ease-in-out .5s, opacity .5s ease-in-out; } #ageWrapper.ageUnknown { visibility: visible; opacity: 1; } #agePopUp { position: fixed; top: 50%; left: 50%; background-color: #fff; text-align: center; padding: 30px; width: 360px; height: 150px; margin-top: -105px; margin-left: -185px; box-sizing: border-box; } #agePopUp a { background-color: black; color: white; padding: 10px 20px; margin-top: 10px; display: inline-block; }
×
×
  • Create New...