popup show only once
Question
I am trying to generate popup only once . current popup is not working . I am new here so I am unable to manage this. nay help please
Here is my jquery code. I do not know why this is not working .please help
$(document).ready(function () { if (localStorage.getItem('popState') != 'shown') { $("#popup").delay(2000).fadeIn(); localStorage.setItem('popState', 'shown') } $('#popup-close').click(function (e) // You are clicking the close button { $('#popup').fadeOut(); // Now the pop up is hiden. }); $('#popup').click(function (e) { $('#popup').fadeOut(); }); });
div{ height : 50px; background-color:blue; }
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <div class="modal fade" id="popup" > <div class="modal-dialog"> <div class="model-image"> <div class="modal-header"> <button type="button" class="popup-close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body"> <div class="model-titles"> <div class="delivery"></div></div> <div class="custom-discount"> <div class="amt"></div></div> </div> </div> </div> </div> </body>
1 answers
solution1
0 ACCPTED 2017-11-06 19:56:56
You're pretty close here. I would set the modal div to display: none because right now, no matter if the localStorage item is set or not, it'll always be visible. Here's what I would do.
CSS:
.modal {
display: none;
}
JS:
if (localStorage.getItem('popState', 'value') != 'shown') {
$("#popup").delay(2000).fadeIn();
localStorage.setItem('popState', 'shown');
console.log('localstorage item set.');
} else {
console.log('No modal for you.');
}
$('#popup-close').on('click', function(e) {
$('#popup').fadeOut(); // Now the pop up is hiden.
});
$('#popup').on('click', function(e) {
$('#popup').fadeOut();
});
With this code, you will check to see it the popstate value is set, if it is not set, it will fade in the modal after that two second mark, set the localStorage item and will log "localStorage item set" to the console. If you would reload the page you were using this on, you would see "No modal for you." get logged to the console. The console.log items are just for testing purposes so when you are ready to use this code in a production setting, I'd remove those.
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.