如何在访问者访问我的网站时第一次显示弹出窗口？

时间：2018-06-14 09:49:13

标签： jquery html css

我试图在用户第一次访问我的网站时显示弹出窗口。当用户访问弹出窗口时，当用户刷新页面时显示。这是工作演示：

＆＃13;
＆＃13; 
var popupdisplayed = false;

jQuery(function() {
  jQuery('[data-popup-close]').on('click', function(e) {
    var targeted_popup_class = jQuery(this).attr('data-popup-close');
    jQuery('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
    e.preventDefault();
  });
});

jQuery(document).ready(function() {
  jQuery('.popup').show(0);
  var halfbrowserHeight = jQuery(window).height() / 2;
  jQuery(window).scroll(function() {
    var distance = jQuery(window).scrollTop();
    if (distance >= halfbrowserHeight && !popupdisplayed) {
      jQuery('.popup').show(0);
      popupdisplayed = true;
    }
  });
});
＆＃13; 
a {
  text-decoration: none;
}

.popup-inner p a {
  text-decoration: none;
  color: #f8f341;
  font-family: 'Yeon Sung', cursive;
}

.popup {
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  background: rgba(0, 0, 0, 0.75);
  font-family: 'Raleway', sans-serif;
}


/* Inner */

.popup-inner {
  line-height: initial;
  max-width: 700px;
  width: 90%;
  padding: 0px;
  position: absolute;
  top: 50%;
  z-index: 99;
  text-align: left;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 1);
  border-radius: 3px;
  background: #40434c;
  background-size: cover;
  color: #FFF;
}


/* Close Button */

.popup-close {
  width: 30px;
  height: 30px;
  padding: 4px 2px 0px;
  display: inline-block;
  position: absolute;
  top: 0px;
  right: 0px;
  transition: ease 0.25s all;
  -webkit-transform: translate(50%, -50%);
  transform: translate(50%, -50%);
  border-radius: 1000px;
  background: #FFF;
  font-family: Arial, Sans-Serif;
  font-size: 20px;
  text-align: center;
  line-height: 100%;
  color: #000 !important;
}

.mybtn {
  width: calc(50% - 60px);
  float: left;
  display: inline-block;
  background: #FFF;
  color: #000;
  text-align: center;
  padding: 5px;
  box-sizing: border-box;
  margin: 10px 30px;
  font-weight: bold;
}

.mybtn:hover {
  opacity: 0.9;
}

.join {
  background: #1b1464;
  color: #FFF;
}

.popup-close:hover {
  -webkit-transform: translate(50%, -50%) rotate(180deg);
  transform: translate(50%, -50%) rotate(180deg);
  background: red;
  text-decoration: none;
}

.right3 ul {
  padding: 0px;
  margin: 0px;
}

.right3 ul li {
  background-image: url('https://s33.postimg.cc/502ku2hsv/correct_sign.png');
  list-style: none;
  padding-left: 30px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 15px;
}

.code {
  color: #23B14D;
  font-weight: 700;
}

.left3 {
  width: 40%;
  padding: 0 10px 0 0;
  box-sizing: border-box;
  min-height: 2px;
  float: left;
}

.right3 {
  width: 60%;
  padding: 0px;
  box-sizing: border-box;
  height: 310px;
  float: left;
  font-size: 17px;
}

.left3 img {
  width: 100%;
  margin-top: 0px;
}

.left3 {
  background: url('https://s33.postimg.cc/d5kms1ya7/player1.png') no-repeat center top / auto 100%;
}

.right3 p {
  margin: 0;
}

.popup-inner {
  display: flex;
  /*background: rgba(228,32,34,0.7); */
  background: red;
  border: 5px solid #FFF;
}

.preventclose {
  position: fixed;
  top: 0;
  width: 100%;
  height: 5px;
}

.left4 {
  width: 100%;
  float: left;
  padding: 0px;
  box-sizing: border-box;
}

.bbtitle {
  font-family: 'Poppins', sans-serif;
  color: #FFF;
  display: block;
  font-weight: bold;
  text-transform: capitalize;
  font-size: 26px;
  padding: 10px 10px 10px 0;
}

.right4 {
  width: 100%;
  float: left;
  color: #FFF;
  padding: 0 10px;
  box-sizing: border-box;
}

.popup-inner .left4 a {
  font-size: 21px;
  font-weight: bold;
}

.popup-inner .right4 a {
  font-size: 21px;
  font-weight: bold;
}

.firstlink {
  display: block;
  padding: 13px 10px 10px;
  background: none;
}

.endtext {
  padding: 10px;
  font-size: 13px;
  color: #999;
  font-weight: bold;
  margin-top: 21px !important;
  display: block;
  float: left;
}

.dollar25 {
  color: black;
  font-weight: bolder;
  text-shadow: 0px 0px 4px yellow;
}

.right3 p {
  padding: 5px;
  margin-top: 18px;
  font-size: 14px;
  text-align: justify;
}

.ifl-image {
  width: 80px !important;
}

@media(max-width:767px) {
  .left3 {
    width: 30%;
  }
  .right3 {
    width: 70%;
    height: 360px;
    padding: 0 10px;
  }
  .popup-inner {
    max-width: 600px;
  }
  .left3 img {
    width: 100%;
    margin-top: 18px;
  }
}

@media(max-width:550px) {
  .popup-inner {
    display: block;
  }
  .bbtitle {
    text-align: center;
    font-size: 22px;
  }
  .left3 {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center top;
  }
  .right3 {
    width: 100%;
  }
  .popup-inner {
    max-width: 400px;
  }
  .off {
    font-size: 60px;
  }
  .left3 img {
    width: 200px;
    margin-top: 18px;
  }
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="preventclose"></div>
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<div class="popup" data-popup="popup-1">
  <div class="popup-inner">
    <div class="left3"></div>
    <div class="right3">
      <div class="bbtitle">International Football League</div>
      <ul>
        <li>Want to win $100K?</li>
        <li>Want to win ownership of the IFL?</li>
        <li>Want to help pick team names?</li>
        <li>Want to help pick players for teams </li>
        <li>Want to help pick team logos?</li>
        <li>Want to help hire staff?</li>
        <li>Want to help fire staff?</li>
      </ul>
      <div class="buttons123">
        <a href="#" class="join mybtn">Join</a><a href="#" class="notnow mybtn">Not Now</a>
      </div>
      <p>Well there's no need to want anymore here's your chance. Just become a member of the International Football League for just <i class="dollar25">$25</i> to help call the shots.</p>
    </div>
    <a class="popup-close" data-popup-close="popup-1" href="#">x</a>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

任何输入都表示赞赏。提前致谢

3 个答案:

答案 0 :(得分：0)

至少你必须使用cookie才能做到这一点。

Javascript在页面重新加载之间不是持久的。 例如：

window.createCookie = function(name,value,days) {
      var expires = "";

      if (days) {
        if (days === "midnight"){
          var today = new Date();
          var t = {
            d: today.getDate()+1,
            m:today.getMonth(),
            y: today.getFullYear()
          };
          var expiredate = new Date(t.y,t.m,t.d,00,01,00,00);
          expires = "; expires="+expiredate.toGMTString();

        }else{
          var date = new Date();
          date.setTime(date.getTime()+(days*24*60*60*1000));
          expires = "; expires="+date.toGMTString();
        }
      }
      // document.cookie = name+"="+value+expires+"; path=/"
    document.cookie = name+"="+value+expires+"; path="+window.location.pathname;
}

window.readCookie = function(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

window.eraseCookie = function(name) {
    createCookie(name,"",-1);
}

Cookie将过期......使用上述功能，您可以保存，读取和删除任何Cookie。此cookie将在F5之间保留，并将在特定日期到期。

其他可能的技术是“LocalStorage”“WebStorage”

答案 1 :(得分：0)

LocalStorage将是一个很好的解决方案。如果用户访问您的站点，您只需在存储中保存一个布尔值。当用户访问您的站点时，您检查该值是否存在。如果是，则不显示弹出窗口，否则显示弹出窗口。

//read from local storage
var popupdisplayed = localStorage.getItem('popupdisplayed');

jQuery(function() {
    jQuery('[data-popup-close]').on('click', function(e) {
    var targeted_popup_class = jQuery(this).attr('data-popup-close');
    jQuery('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
    e.preventDefault();
  });
});

jQuery(document).ready(function() {
    //if popupdisplayed is null, the user has not visited the site before
    if(popupdisplayed === null) {
        jQuery('.popup').show(0);
        var halfbrowserHeight = jQuery(window).height() / 2;
        jQuery(window).scroll(function() {
            var distance = jQuery(window).scrollTop();
            if (distance >= halfbrowserHeight && !popupdisplayed) {
            jQuery('.popup').show(0);
            //save in local storage
            localStorage.setItem('popupdisplayed', true); 
        }
    }
  });
});

答案 2 :(得分：0)

当用户访问您的网站时，您还可以使用localStorage存储标记。它将在浏览器会话中可用，但您必须考虑到，如果用户更改浏览器或清除存储，则标志将丢失。要在浏览器或计算机之间使用，您必须将标志存储在后端并检查它是否显示弹出窗口。

相关问题
最新问题