更改模式彈出式觸發器從按鈕點擊到頁面加載

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信息（檢查用戶的第一個visite）來執行此操作，並在檢查cookie後使用jquery準備在啓動時打開poupu。

在這裏你可以找到一個Fiddle（堆棧段不給使用Cookie，跑小提琴兩次許可，則pupup將會消失）

PS：我已經創建秀彈出功能，防止重複代碼，我也刪除了// $ (this).after($(".popup"));這行刪除div彈出窗口??！

而且我用jQuery的餅乾LIB訪問和等餅乾

在這裏看到的代碼

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>