Question

我的页面上有一个模态。目前，当您按下按钮时，它会设置为弹出。但是，我希望它在页面加载时弹出。理想情况下，它只会在用户第一次访问该网站时弹出。

摘录：

// Popup Window
var scrollTop = '';
var newHeight = '100';

$(window).bind('scroll', function () {
    scrollTop = $(window).scrollTop();
    newHeight = scrollTop + 100;
});

$('.popup-trigger').click(function (e) {
    e.stopPropagation();
    if (jQuery(window).width() < 767) {
        $(this).after($(".popup"));
        $('.popup').show().addClass('popup-mobile').css('top', 0);
        $('html, body').animate({
            scrollTop: $('.popup').offset().top
        }, 500);
    } else {
        $('.popup').removeClass('popup-mobile').css('top', newHeight).toggle();
    }
    ;
});

$('html').click(function () {
    $('.popup').hide();
});

$('.popup-btn-close').click(function (e) {
    $('.popup').hide();
});

$('.popup').click(function (e) {
    e.stopPropagation();
});

.popup-trigger {
    display: block;
    margin: 0 auto;
    padding: 20px;
    max-width: 260px;
    background: #4EBD79;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    line-height: 24px;
    cursor: pointer;
}

.popup {
    display: none;
    position: absolute;
    top: 100px;
    left: 50%;
    width: 700px;
    margin-left: -350px;
    padding: 50px 30px;
    background: #fff;
    color: #333;
    font-size: 19px;
    line-height: 30px;
    border: 10px solid #150E2D;
    z-index: 9999;
}

.popup-mobile {
    position: relative;
    top: 0;
    left: 0;
    margin: 30px 0 0;
    width: 100%;
}

.popup-btn-close {
    position: absolute;
    top: 8px;
    right: 14px;
    color: #4EBD79;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<a class="popup-trigger">Open Pop Up</a>

<div class="main">
    Page text
</div>

<div class="popup">
    Modal Text
    <span class="popup-btn-close">close</span>
</div>

我不想再使用popup-trigger按钮，我只想在页面加载时显示模式。

我试过更换 $('.popup-trigger').click(function(e) {

使用： $(document).load(function() {

那里没有运气。

有什么想法吗？此外，我刚刚进入cookie，但不知道它们是如何工作的。我如何才能使它仅在有人第一次访问网站时出现，例如，每天。

Answer 1

您可以通过存储cookie信息（以检查用户的第一次访问）来执行此操作，并在检查cookie后使用jquery准备好在启动时打开poupu。

在这里你可以找到一个 Fiddle （堆栈片段不允许使用cookie，运行小提琴两次，然后pupup将消失）

PS：我创建了show popup函数来防止重复代码，我还删除了// $ (this).after($(".popup"));删除div弹出的行！??

我还使用Jquery cookie lib来访问和et cookies

请参阅此处的代码

JS：

var scrollTop = '';
var newHeight = '100';

$(function() {
    console.log($.cookie("openPop"));
    if($.cookie('openPop')){
      $.cookie('openPop',false);
      showPopup();
    }
    else 
      $.cookie('name',true);
});

$(window).bind('scroll', function() {
  scrollTop = $(window).scrollTop();
  newHeight = scrollTop + 100;
});

$('.popup-trigger').click(function(e) {
  e.stopPropagation();
  showPopup();
});


function showPopup() {
  scrollTop = $(window).scrollTop();
  newHeight = scrollTop + 100;

  if (jQuery(window).width() < 767) {
    //$(this).after($(".popup"));
    $('.popup').show().addClass('popup-mobile').css('top', 0);
    $('html, body').animate({
      scrollTop: $('.popup').offset().top
    }, 500);
  } else {
    $('.popup').removeClass('popup-mobile').css('top', newHeight).toggle();
  };
}

$('html').click(function() {
  $('.popup').hide();
});

$('.popup-btn-close').click(function(e) {
  $('.popup').hide();
});

$('.popup').click(function(e) {
  e.stopPropagation();
});

CSS：

.popup-trigger {
  display: block;
  margin: 0 auto;
  padding: 20px;
  max-width: 260px;
  background: #4EBD79;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  line-height: 24px;
  cursor: pointer;
}

.popup {
  display: none;
  position: absolute;
  top: 100px;
  left: 50%;
  width: 700px;
  margin-left: -350px;
  padding: 50px 30px;
  background: #fff;
  color: #333;
  font-size: 19px;
  line-height: 30px;
  border: 10px solid #150E2D;
  z-index: 9999;
}

.popup-mobile {
  position: relative;
  top: 0;
  left: 0;
  margin: 30px 0 0;
  width: 100%;
}

.popup-btn-close {
  position: absolute;
  top: 8px;
  right: 14px;
  color: #4EBD79;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
}

HTML：

  <src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<a class="popup-trigger">Open Pop Up</a>

<div class="main">
  Page text
</div>

<div class="popup">
  Modal Text
  <span class="popup-btn-close">close</span>
</div>

Answer 2

为什么不在onload之后直接调用$('.popup').show()，而不是添加点击侦听器。检查这个小提琴，希望它适合你。 https://jsfiddle.net/kajalc/h4fomm5q/

如果可以，则可以从脚本中删除按钮及其事件。

Answer 3

删除了使用按钮来触发模态。检查一下，如果它适合你。

// Popup Window
  var scrollTop = '';
  var newHeight = '100';
  if (jQuery(window).width() < 767) {
    $('.popup').show().addClass('popup-mobile').css('top', 0);
    $('html, body').animate({
      scrollTop: $('.popup').offset().top
    }, 500);
  } else {
    $('.popup').removeClass('popup-mobile').css('top', newHeight).toggle();
  }

  $(window).bind('scroll', function() {
    scrollTop = $(window).scrollTop();
    newHeight = scrollTop + 100;
  });

  $('.popup-btn-close').click(function(e) {
    $('.popup').hide();
  });

   

.popup {
    display: none;
    position: absolute;
    top: 100px;
    left: 50%;
    width: 700px;
    margin-left: -350px;
    padding: 50px 30px;
    background: #fff;
    color: #333;
    font-size: 19px;
    line-height: 30px;
    border: 10px solid #150E2D;
    z-index: 9999;
}

.popup-mobile {
    position: relative;
    top: 0;
    left: 0;
    margin: 30px 0 0;
    width: 100%;
}

.popup-btn-close {
    position: absolute;
    top: 8px;
    right: 14px;
    color: #4EBD79;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="main">
    Page text
</div>

<div class="popup">
    Modal Text
    <span class="popup-btn-close">close</span>
</div>

更改模式弹出触发器从按钮单击到页面加载

3 个答案: