I have a modal on my page. Currently, it is set to pop up when you press a button. However, I want it to pop up when the page loads. Ideally, it would only popup the first time a user visits the site.
The snippet:
// 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>
I don't want to use popup-trigger
button anymore, I just want to have the modal show up when the page loads.
I have tried replacing $('.popup-trigger').click(function(e) {
with: $(document).load(function() {
no luck there.
Any ideas? Also, i just got into cookies, but not sure how they work. How would I have it such that it only appears the first time someone visits the site per certain time frame, eg per day.
You can perfom this by storing a cookies information (to check first visite of a user) and also use jquery ready to open the poupu on startup after checking the cookies .
Here you can find a Fiddle ( stack snippet doesn't give permission to use cookies , run the fiddle twice then the pupup will disapear )
PS : I ve created show popup function to prevent duplicate code, also i've removed the line //$ (this).after($(".popup"));
which remove the div popup ??!
Also I used Jquery cookie lib to access and et cookies
See code here
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>
Instead of adding click listeners, why don't you try calling the $('.popup').show()
directly after onload. Check this fiddle, hope it works for you. https://jsfiddle.net/kajalc/h4fomm5q/
If this is fine then the button and its event can be removed from the script.
Removed use of button to trigger the modal. Check this, if it works for you.
// 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.