[英]Changing modal popup trigger from button click to on page load
我的页面上有一个模式。 当前,它设置为在您按下按钮时弹出。 但是,我希望它在页面加载时弹出。 理想情况下,它只会在用户第一次访问该网站时弹出。
片段:
// 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,但不确定它们如何工作。 我将如何使用它,使其仅在特定时间范围内(例如每天)有人首次访问该网站时出现。
您可以通过存储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>
除了添加点击侦听器外,为什么不尝试在onload之后直接调用$('.popup').show()
。 检查这个小提琴,希望它对您有用。 https://jsfiddle.net/kajalc/h4fomm5q/
如果很好,则可以从脚本中删除按钮及其事件。
删除了使用按钮触发模式的使用。 如果适合您,请选中此选项。
// 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.