Hello
Here Example Of how to create simple popup using jquery. but new things that if you have to add
functionality if user visited site then not display popup. if user in site then i can be see popup.
For this simple example how to create popup with jquery and if have to add functionality to only one
time see the popup and it will display after some time. here 5 second time out session.
Please check Below Code.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script type="text/javascript">
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
}
return "";
}
$(document).ready(function(){
var popup = getCookie("newpopup");
alert(popup);
if(popup == null || popup == undefined || popup == ""){
setTimeout(function () {
$.cookie('newpopup',"true");
$(".popup").show();
}, 5000);
}else{
$(".popup").hide();
}
$(".close_button").click(function(){
$(".popup").hide();
});
});
</script>
<style>
.popup {
background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
height: 100%;
position: fixed;
text-align: center;
width: 100%;
z-index: 99999999;
}
</style>
<div>
<div class="popup" style="display: none;">
<div class="popupbox">
<div class="close_button"><a href="javascript:void(0)">Close</a></div>
<h1>This is our popup</h1>
<ul>
<li><a href="https://twitter.com/" >twitter</a></li>
<li><a href="https://www.facebook.com/" >twitter</a></li>
<li><a href="https://in.pinterest.com/" >facebook</a></li>
<li><a href="https://instagram.com/">instagram</a></li>
</ul>
</div>
</div>
</div>
Here Example Of how to create simple popup using jquery. but new things that if you have to add
functionality if user visited site then not display popup. if user in site then i can be see popup.
For this simple example how to create popup with jquery and if have to add functionality to only one
time see the popup and it will display after some time. here 5 second time out session.
Please check Below Code.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script type="text/javascript">
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
}
return "";
}
$(document).ready(function(){
var popup = getCookie("newpopup");
alert(popup);
if(popup == null || popup == undefined || popup == ""){
setTimeout(function () {
$.cookie('newpopup',"true");
$(".popup").show();
}, 5000);
}else{
$(".popup").hide();
}
$(".close_button").click(function(){
$(".popup").hide();
});
});
</script>
<style>
.popup {
background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
height: 100%;
position: fixed;
text-align: center;
width: 100%;
z-index: 99999999;
}
</style>
<div>
<div class="popup" style="display: none;">
<div class="popupbox">
<div class="close_button"><a href="javascript:void(0)">Close</a></div>
<h1>This is our popup</h1>
<ul>
<li><a href="https://twitter.com/" >twitter</a></li>
<li><a href="https://www.facebook.com/" >twitter</a></li>
<li><a href="https://in.pinterest.com/" >facebook</a></li>
<li><a href="https://instagram.com/">instagram</a></li>
</ul>
</div>
</div>
</div>
0 komentar:
Post a Comment