big box dfp template

.html

<style>
#age-gatead-overlay {
	background-color: #dfdfdf;
	width: 100%;
	height: 100%;
	position: relative;	
	text-align: center;
	min-height: 250px;
	min-width: 300px;
	-webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
	z-index:2;
}
#age-gatead-overlay #form-holder {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	width: 80%;
}

.ad {
	width: 300px;
	height: 250px;
	background-image:url("[%BbTop%] ");	
	position: relative;
}

.ad a {
	 position: absolute;
	 z-index:1;	
	 top: 0;
	 left:0;
	 width: 100%;
	 height: 100%;
	 display: block;
}
</style>

<script language="javascript">
    // Mobile bigboxtop ad 
    var BigBoxTop = [ "[%BbTop%]";
    var BigBoxTopBk = "[%BbTopBk%]" ];
    // Redirection URL big box top
    var redirectURLBigBoxTop = "%%CLICK_URL_UNESC%%[%RedirectBbTopURL%]";
</script>

<div class="ad">
	<section id="age-gatead-overlay">
        <div id="form-holder">
            <form id="age-gate-form">
                <h3>This content is intended for audiences over the age of 19+. Please verify you are legal age of majority in your province.</h3>
                <div>
                	<input type="checkbox" id="age_gate_checkbox" name="age_gate" value="true" />
                	<label for="age_gate_checkbox">I am older</label>
				</div>
                <input type="button" id="age_gate_button" name="age_gate_button" value="Verify"/>
            </form>
        </div>
    </section>

<script language="javascript">
    var a = document.createElement('a');
    var linkText = document.createTextNode("Link To Content");
    a.appendChild( linkText );
    a.href = redirectURLBigBoxTop;
    document.body.appendChild( a );
</script>
</div>

<script language="javascript">
window.onload = function loadPage() {
       var hiddenDiv = ''';
       hiddenDiv = document.createElement('div');
       hiddenDiv.setAttribute('id', 'hiddenDiv');
       document.body.appendChild(hiddenDiv);
       document.getElementById("hiddenDiv").style.width = "1px";
       document.getElementById("hiddenDiv").style.width = "1px";
       document.getElementById("hiddenDiv").style.display = "none";

	var buttonClicked = false;
	var gateDelay = "1000";
	var i = 0;
	var docCookies = {
		
	  getItem: function (sKey) {
		if (!sKey) { return null; }
		return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
	  },
	  
	  setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {
		if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return false; }
		var sExpires = "";
		if (vEnd) {
		  switch (vEnd.constructor) {
			case Number:
			  sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd;
			  break;
			case String:
			  sExpires = "; expires=" + vEnd;
			  break;
			case Date:
			  sExpires = "; expires=" + vEnd.toUTCString();
			  break;
		  }
		}
		document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
		return true;
	  },
	  
	  removeItem: function (sKey, sPath, sDomain) {
		if (!this.hasItem(sKey)) { return false; }
		document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "");
		return true;
	  },
	  
	  hasItem: function (sKey) {
		if (!sKey) { return false; }
		return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
	  },
	  
	  keys: function () {
		var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
		for (var nLen = aKeys.length, nIdx = 0; nIdx < nLen; nIdx++) { aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]); }
		return aKeys;
	  }
	};
	
	var cookieSet = docCookies.getItem("ageGate");
	var resetAds = docCookies.getItem("resetAd");
	console.log("check if cookie set " + cookieSet , "check if ads set " + resetAds);
	
	ageGateTimer = setInterval(checkGateCookie, gateDelay);
	
	document.getElementById("age_gate_button").addEventListener("click", submitGate);
	
	function submitGate() {
		checkbox = document.getElementById("age_gate_checkbox").checked;
		if ( checkbox ) {
			buttonClicked = true;
			removeGate( true );
		}
	}
	
	function removeGate( submitOn=false ) {
		clearInterval(ageGateTimer);
		console.log("checkbox is " + checkbox);
		if ( checkbox && submitOn ) {
			document.getElementById("age-gatead-overlay").style.opacity = "0";
			document.getElementById("age-gatead-overlay").style.pointerEvents = "none";
			docCookies.setItem("ageGate", true);
		}
	}
	// Check if cookie set Hearbeat if not reset the ads
	function checkGateCookie() {
		i++;
		cookieSet = docCookies.getItem("ageGate");
		if ( cookieSet ) {
			removeGate();
		} else if ( i == 2 ) {
			console.log("timer out");
			resetAds = docCookies.getItem("resetAd");
			
	
			if ( ! resetAds ) {
				docCookies.setItem("resetAd", true);
				console.log("check if ads set " + resetAds);
				resetAd();
			}
		}
	}
	// Google Tag Refresh
	function resetAd() {
                if ( googletag ) {
		     googletag.pubads().refresh();
                }
	}
} 
</script>