我创建了一个灯箱弹出窗口。
以下是Codepen：http://codepen.io/shahbazkhan/pen/VjyqkE
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>
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;
}
Javascript：
https://www.jcrew.com/media/wro/js/email-lightbox_v2_m56577569836458583.js
我需要的东西：
一个。由于我对此非常陌生，所以我无法添加延迟计时器，即当有人访问我的网站时，它应该会延迟10秒。
湾我需要让popUp只在我的页面上出现一次。即，当用户关闭弹出窗口时，它不会出现，直到用户清除其缓存/ cookie。
答案 0 :(得分：1)
一个。我建议在CSS中为popup提供一个none属性，并在html中给它一个id。 然后将其添加到您的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中。您可以通过使用sessionStorage存储在浏览器关闭时删除的变量或localStorage来存储在缓存清除之前存在的变量来实现此目的。
解决方案（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*/);
}