弹出窗口

弹出窗口

关注
发信
关注(28)粉丝(399)

javascript - 灯箱弹出窗口仅出现一次

我创建了一个灯箱弹出窗口。

这是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秒。

b。我需要使popUp在我的页面上仅出现一次。即，当用户关闭弹出窗口时，直到用户清除其缓存/ Cookie才应显示该弹出窗口。

最佳答案

答：我建议在CSS中为弹出窗口提供显示属性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*/);
}

09-10 17:21
Powered by LMLPHP ©2024 弹出窗口 0.033337