Shahbaz Khan Shahbaz Khan - 4 months ago 16
CSS Question

Lightbox Popup to appear only ONCE

I have created a lightbox popup.

Here is the Codepen: http://codepen.io/shahbazkhan/pen/VjyqkE

The HTML


<div id="lightboximg" class=""> <!-- class="hide" -->
<img src="https://www.jcrew.com/media/images/email/close_popup_v2_m56577569832109834.jpg" alt="Close" class="closePopup">
<div class="emailCopyContainer">
<span class="emailLightBoxHeader">Subscribe</span><br>
<span class="emailLightBoxCopy">Sign up for the latest<Br> fashion and beauty news! </span>
</div>
<div class="form_wrap">
<form name="signUpSubscribePopup" id="signUpSubscribePopup" onsubmit="javascript: return false;" action="https://www.jcrew.com/pk/index.jsp">
<input type="hidden" name="bmForm" value="signUpSubscribePopup">
<input type="hidden" name="bmFormID" value="lnbamVW/155f28e24f5">
<input type="hidden" name="bmUID" value="lnbamVX">
<input type="hidden" name="bmIsForm" value="true">
<input type="hidden" name="bmPrevTemplate" value="/pk/index.jsp">
<input type="hidden" name="bmText" value="subscribeEmail"><input type="text" class="email_box text translate" name="subscribeEmail" maxlength="254" size="25" value="Email Address" id="email"><input type="hidden" name="bmSubmit" value="emailpopup"><input type="submit" name="emailpopup" border="0" value="SUBMIT" class="submit" secure="false">

<div class="emailSignupError hide">Please enter a valid email address</div>
<input type="hidden" name="bmLocale" value="en_PK">
<input type="hidden" name="bmFields" value="bmSubmit,bmText,bmPrevTemplate,bmLocale,bmForm,bmIsForm,bmUID,bmFormID">
<input type="hidden" name="bmHash" value="2b589d967a6dbd6b21b2a4e081d2caf12535606d">
</form>

<div class="intl-disclaimer">To see how we may use your information, take a look at our <a href="/help/privacy_policy.jsp" target="_blank">privacy policy</a>.</div>



</div>

<div class="emailSubmitThankYou hide">
<span class="emailSubmitHeader">SUCCESS!</span><br><br>
<span class="emailSubmitCopy">You’re all signed up!</span>
</div>
<div class="emailSubmitError hide">
<span class="emailErrorHeader">Hmmm...</span><br><br>
<span class="emailErrorCopy">Something’s not working quite right. <br> Please try again later. Thanks!</span>
</div>
</div>


The CSS

#lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1201;
background-color: #fff;
opacity: .5;
filter: alpha(opacity=80);
}

#lightboximg {
position: absolute;
z-index: 1300;
left: 50%;
margin-left: -190px;
width: 456px;
top: 120px;
border: 5px solid #000;
background: white;
text-align: center;
height: auto;
padding-bottom: 40px;
}

img.closePopup {
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
width: 14px;
height: 13px;
}

.emailCopyContainer {
padding-top: 30px;
padding-bottom: 15px;
}
.emailLightBoxHeader {
font-family: 'Times New Roman',Times,serif;
font-size: 68px;
letter-spacing: 1px;
color: #000;
}

.emailLightBoxCopy {
font-family: 'Times New Roman',Times,serif;
font-size: 20px;
letter-spacing: 1px;
color: #000;
}

.form_wrap {
padding-top: 15px;
padding-bottom: 15 px;
vertical-align: bottom;
background-color: #fff;
text-align: center;
}

.emailSubmitThankYou {
margin-left: -85px;
margin-top: -70px;
}
.emailSubmitThankYou, .emailSubmitError {
position: absolute;
top: 47%;
left: 38%;
}
.hide {
display: none;
}

.emailSubmitError {
margin-left: -154px;
margin-top: -99px;
}
.emailSubmitThankYou, .emailSubmitError {
position: absolute;
top: 47%;
left: 38%;
}

#lightboximg form {
margin: 0;
padding: 0;
}

.emailLightBoxHeader {
font-family: 'Times New Roman',Times,serif;
font-size: 68px;
letter-spacing: 1px;
color: #000;
}
form {
display: block;
margin-top: 0em;
}

input[type="hidden" i], input[type="image" i], input[type="file" i] {
-webkit-appearance: initial;
background-color: initial;
padding: initial;
border: initial;
}

input[type="hidden" i] {
display: none;
}
input {
-webkit-appearance: textfield;
background-color: white;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
cursor: auto;
padding: 1px;
border-width: 2px;
border-style: inset;
border-color: initial;
}
input, textarea, keygen, select, button {
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
margin: 0em 0em 0em 0em;
font: 13.3333px Arial;
}

input, textarea, keygen, select, button, meter, progress {
-webkit-writing-mode: horizontal-tb;
}

#lightboximg input.text {
width: 240px;
height: 35px;
margin: 0 auto;
display: inline-block;
border: 1px solid #CCC;
font-family: Arial,Helvetica,sans-serif font-style:normal;
font-weight: 450;
font-size: 12px;
letter-spacing: 1px;
line-height: 200%;
vertical-align: bottom;
padding: 0 0 0 8px;
}

input.submit {
display: inline-block;
width: 140px;
height: 37px;
margin: 0 auto;
background-color: #000;
color: #FFF;
font-family: Arial,Helvetica,sans-serif;
font-style: normal;
font-weight: bold;
font-size: 12px;
cursor: hand;
border: 0;
vertical-align: middle;
letter-spacing: 1px;
line-height: 200%;
clear: both;
}

.emailSignupError {
width: 290px;
height: 20px;
margin: 15px auto;
font-family: Arial,Helvetica,sans-serif;
font-style: normal;
font-weight: normal;
color: #f33;
font-size: 11px;
}
input[type="hidden" i], input[type="image" i], input[type="file" i] {
-webkit-appearance: initial;
background-color: initial;
padding: initial;
border: initial;
}
input[type="hidden" i] {
display: none;
}

.intl-disclaimer {
font: normal 10px/17px arial;
width: 375px;
padding: 25px 0 0;
margin: 0 auto;
text-align: left;
}
.intl-disclaimer a {
color: #000;
}

.emailSubmitHeader, .emailErrorHeader {
font-family: 'Times New Roman',Times,serif;
font-size: 57px;
letter-spacing: 1px;
text-color: #000;
font-style: regular;
}
.emailSubmitCopy, .emailErrorCopy {
font-family: 'Times New Roman',Times,serif;
font-size: 25px;
letter-spacing: 1px;
text-color: #000;
font-style: regular;
line-height: 36px;
}

.emailSubmitHeader, .emailErrorHeader {
font-family: 'Times New Roman',Times,serif;
font-size: 57px;
letter-spacing: 1px;
text-color: #000;
font-style: regular;
}

.emailSubmitCopy, .emailErrorCopy {
font-family: 'Times New Roman',Times,serif;
font-size: 25px;
letter-spacing: 1px;
text-color: #000;
font-style: regular;
line-height: 36px;
}


The Javascript:

https://www.jcrew.com/media/wro/js/email-lightbox_v2_m56577569836458583.js

Things i need:

a. Since i'm pretty new to this i can not add a delay timer i.e It should appear 10 seconds late when someone visits my site.

b. I need to make the popUp to appear only once on my page. i.e, when the user closes the popup, it should not appear until the user clears his cache/cookie.

Answer

I would suggest giving the popup a display property of none in CSS, and give it an id in html. Then add this to your JS:

setTimeout(function() {
  document.getElementById("YOURIDHERE").style.display = "block/inline/etc.";
}, 10000 /*Note: divide this value by 1000 to get the delay in secs.*/);