javascript 定时CTA / Modal
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript 定时CTA / Modal相关的知识,希望对你有一定的参考价值。
var pathArray = window.location.pathname.split( '/' ),
blogSegment = 'blog',
currentTimestamp = Date.now(),
modalOmissionDuration = 172800000, // 2 weeks
modalTimestamp = Number(localStorage.getItem("time-modal-last-shown")),
ctaTimestamp = Number(localStorage.getItem("time-cta-last-shown")),
ctaScrollPoint = getMax() * .25,
slideCTA = $(".slide-in-cta"),
slideCTAClose = $(".slide-in-cta .close");
/*
Slide in CTA
Show at 25% progress on blog post
Using 25% of reading progress to start
*/
if ( $('body').hasClass('layout-blog') && $('body').hasClass('single-post') ) {
if ((currentTimestamp - ctaTimestamp) >= modalOmissionDuration) {
$(window).scroll(function() {
if( ($(window).scrollTop() > (ctaScrollPoint) ) ) {
slideCTA.fadeIn();
}
else{
slideCTA.fadeOut();
}
});
}
}
// close slide modal and set timestamp for 'time-cta-last-shown'
slideCTAClose.on('click', function (e) {
slideCTA.css('visibility', 'hidden');
slideCTA.find('.hs-cta-node').css('visibility', 'hidden');
/*
Set visibility hidden because the timestamp check only works on page load
This prevents the cta from showing after it's closed (and re-showing on scroll)
The local storage timestamp check will then prevent the cta from showing on subsequent pages.
*/
localStorage.setItem("time-cta-last-shown", currentTimestamp);
});
/*
Timed modal that loads the blog subscription form if a localStorage
operation passes.
Note: this modal is also loaded via data attributes (and clicking) in three
other places on the site. Click-loading the modal has no bearing on this
timed load.
*/
/*
function which checks the timestamp and localStorage parameters and if the operation passes,
adds the timed-modal class to the body, sets localStorage and displays the modal.
*/
function nl_signup_modal() {
if ((currentTimestamp - modalTimestamp) >= modalOmissionDuration) {
setTimeout(function() {
$('body').addClass('timed-modal');
localStorage.setItem("time-modal-last-shown", currentTimestamp);
$("#subscribeModal").modal("show");
}, 6000);
}
}
/*
If the url segment includes /blog/ at all, run the function
*/
if (jQuery.inArray(blogSegment, pathArray) != '-1') {
nl_signup_modal();
}
/*
Use the .timed-modal class to namespace the hide.bs.modal event
which is fired immediately when the hide instance method has been called. This will prevent the
function from taking any action when the modal is opened by click.
*/
$('.timed-modal #subscribeModal').on('hidden.bs.modal', function (e) {
$('body').removeClass('timed-modal');
localStorage.setItem("time-modal-last-shown", currentTimestamp);
});
以上是关于javascript 定时CTA / Modal的主要内容,如果未能解决你的问题,请参考以下文章