Introduction:
In this article we are going to explain how to Show A Popup Only Once Per Visitor on your website with example.
Description:
Use jquery.firstVisitPopup.js plugin to open first time popup on your website.
The firstVisitPopup jQuery plugin which uses browser cookies to show up a modal popup (e.g. welcome modal) to first-time visitors.
Click here to download jquery.firstVisitPopup.js jQuery plugin
Now let’s see simple example:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="jquery.firstVisitPopup.js"></script>
<script>
$(function () {
$('#my-welcome-message').firstVisitPopup({
cookieName: 'homepag1e',
showAgainSelector: '#show-message'
});
});
</script>
</head>
<body>
<div id="my-welcome-message">
<h2>Welcome to my site</h2>
<p>Hello, welcome to my website.</p>
</div>
<style>
#fvpp-blackout {
display: none;
z-index: 499;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #000;
opacity: 0.5;
}
#my-welcome-message {
display: none;
z-index: 500;
position: fixed;
width: 36%;
left: 30%;
top: 20%;
padding: 20px 2%;
font-family: Calibri, Arial, sans-serif;
background: #FFF;
}
#fvpp-close {
position: absolute;
top: 10px;
right: 20px;
cursor: pointer;
}
#fvpp-dialog h2 {
font-size: 2em;
margin: 0;
}
#fvpp-dialog p {
margin: 0;
}
</style>
</body>
</html>
Output:
I hope this article will help to you after reading.
Leave a Comment