jquery cookie 问题 - 无法打开模式 window
jquery cookie issue - does not open modal window
jquery-cookie 插件有一个小问题,如您在 functions.php 中所见,我首先注册脚本,然后入队 jquery_cookie_script,但无法正常工作。 . 我想在用户今天打开网站时存档,并且 scroll.Top() > window 高度的 50%,模态 window 将被打开。当点击X按钮关闭模态window时,刷新整个页面后将无法再次打开,只有7天。
你可以在下面看到我的代码,我需要一些帮助来解决这个问题,因为根本不起作用。
jQuery(document).ready(function($) {
$(window).scroll(function(event) {
var y = $(this).scrollTop();
var half_height = $(window).height() / 2;
if (y > half_height) {
if ($.cookie('modal_shown') == null) {
$.cookie('modal_shown', 'yes', {
expires: 7,
path: '/'
});
$('#modal').reveal();
}
}
});
});
in functions.php
function enqueue_custom_js(){
wp_enqueue_script('custom', get_stylesheet_directory_uri() . '/js/custom.js',array(),time());
wp_register_script( 'jquery_cookie_script', 'http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js',array(),time());
wp_enqueue_script( 'jquery_cookie_script');
}
add_action('wp_enqueue_scripts','enqueue_custom_js');
HTML
<!-- Modal -->
<div class="modal fade" id="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body text-center">
<span class="title_subtitle white">Hey babe!<br>Let's link up!</span><br>
<span class="get_off">Get 15% OFF</span><br>
<span class="first_order white">your first order</span><br>
<span class="arrivals white">new arrivals, contests and promos to your inbox</span><br>
<input type="email" name="email" placeholder="Email" required>
<button class="btn subscribe-btn" value="Submit">Join Now</button>
</div>
<div class="modal-footer text-center">
<a data-dismiss="modal" title="No thanks, I don't need a Promo Code">No thanks, I don't need a Promo Code</a>
</div>
</div>
</div>
</div>
我找到了一个可以正常工作的解决方案
jQuery( document ).ready( function( $ ) {
$(document).on('scroll', function() {
var y = $(this).scrollTop();
var half_height = $(window).height()/2;
if (y > half_height) {
$(document).off('scroll');
if ($.cookie('pop') == null) {
$('#modal').modal('show');
$.cookie('pop', '7');
}
}
});
});
jquery-cookie 插件有一个小问题,如您在 functions.php 中所见,我首先注册脚本,然后入队 jquery_cookie_script,但无法正常工作。 . 我想在用户今天打开网站时存档,并且 scroll.Top() > window 高度的 50%,模态 window 将被打开。当点击X按钮关闭模态window时,刷新整个页面后将无法再次打开,只有7天。
你可以在下面看到我的代码,我需要一些帮助来解决这个问题,因为根本不起作用。
jQuery(document).ready(function($) {
$(window).scroll(function(event) {
var y = $(this).scrollTop();
var half_height = $(window).height() / 2;
if (y > half_height) {
if ($.cookie('modal_shown') == null) {
$.cookie('modal_shown', 'yes', {
expires: 7,
path: '/'
});
$('#modal').reveal();
}
}
});
});
in functions.php
function enqueue_custom_js(){
wp_enqueue_script('custom', get_stylesheet_directory_uri() . '/js/custom.js',array(),time());
wp_register_script( 'jquery_cookie_script', 'http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js',array(),time());
wp_enqueue_script( 'jquery_cookie_script');
}
add_action('wp_enqueue_scripts','enqueue_custom_js');
HTML
<!-- Modal -->
<div class="modal fade" id="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body text-center">
<span class="title_subtitle white">Hey babe!<br>Let's link up!</span><br>
<span class="get_off">Get 15% OFF</span><br>
<span class="first_order white">your first order</span><br>
<span class="arrivals white">new arrivals, contests and promos to your inbox</span><br>
<input type="email" name="email" placeholder="Email" required>
<button class="btn subscribe-btn" value="Submit">Join Now</button>
</div>
<div class="modal-footer text-center">
<a data-dismiss="modal" title="No thanks, I don't need a Promo Code">No thanks, I don't need a Promo Code</a>
</div>
</div>
</div>
</div>
我找到了一个可以正常工作的解决方案
jQuery( document ).ready( function( $ ) {
$(document).on('scroll', function() {
var y = $(this).scrollTop();
var half_height = $(window).height()/2;
if (y > half_height) {
$(document).off('scroll');
if ($.cookie('pop') == null) {
$('#modal').modal('show');
$.cookie('pop', '7');
}
}
});
});