Lightbox Popup erscheint nur EINMAL

Question

Ich habe ein Leuchtkasten-Popup erstellt. Hier

ist die Codepen: http://codepen.io/shahbazkhan/pen/VjyqkE

Die HTML

<div id="lightboximg" class=""> <!-- class="hide" --> 
    <img src="https://www.jcrew.com/media/images/email/close_popup_v2_m9834.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> 

Die 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; 
} 

Die Javascript:

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

Dinge, die ich brauche:

ein. Da ich ziemlich neu dazu bin, kann ich keinen Verzögerungstimer hinzufügen, d. H. Es sollte 10 Sekunden später erscheinen, wenn jemand meine Seite besucht.

b. Ich muss das PopUp nur einmal auf meiner Seite erscheinen lassen. wenn der Benutzer das Popup schließt, sollte es nicht erscheinen, bis der Benutzer seinen Cache/Cookie löscht.

Answer 1

A. Ich würde vorschlagen, dem Popup eine Anzeigeeigenschaft von none in CSS zu geben und ihm eine ID in html zu geben. Dann fügen Sie diese an Ihre JS:

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

B. Sie dies durch den Einsatz von beiden sessionStorage erreichen können eine Variable zum Speichern, die nahe oder localStorage auf Browser gelöscht wird eine Variable für die Speicherung, die vorhanden ist, bis Cache gelöscht wird.

Lösung (JS):

var localValue = localStorage.getItem('userClickedAway') 
if(localValue != "false") { 
    setTimeout(function() { 
    document.getElementById("YOURIDHERE").style.display = "block/inline/etc."; 
}, 10000 /*Note: divide this value by 1000 to get the delay in secs.*/); 
} 

function noPopup() { // call this function (from HTML when the user click away 
    localStorage.setItem('userClickedAway', false /*the popup won't occur*/); 
}