將模式彈出觸發器從按鈕單擊更改為頁面加載

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信息（檢查用戶的首次訪問者）來執行此操作，也可以使用jquery在檢查cookie后准備在啟動時打開poupu。

在這里您可以找到一個小提琴 （堆棧片段未授予使用Cookie的權限，請運行小提琴兩次，然后該小女孩會消失）

PS：我已經創建了show popup函數以防止重復代碼，而且我還刪除了// // $ (this).after($(".popup")); 其中刪除div彈出窗口？！

我也使用Jquery cookie lib訪問和et cookie

在這里查看代碼

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>