- Get link
- Other Apps
So, the solution is we can use the firstVisitPopup.js JQuery Plugin to display a pop up message once per visitor. Because it will detects a cookies per visitor and will not displays the second pop up message.
Implementation of JQuery PopUp Message
1. Add jQuery library and the jQuery first visit popup plugin between <head> and </head>.
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
<script src='//raw.githubusercontent.com/chriscook/first-visit-popup/master/jquery.firstVisitPopup.js'/>
2. Insert your welcome message between <body> and </body>
<div id="my-welcome-message">
<h2>Welcome to my site</h2>
<p>Hello, welcome to my website.</p>
</div>
3. Call the modal pop up message with jQuery code and paste it between <body> and </body> and below your welcome message.
<script>
$('#my-welcome-message').firstVisitPopup({
cookieName : 'homepage',
showAgainSelector: '#show-message'
});
</script>
4. Add this CSS Style between <head> and </head>.
<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>
This code is not working fine. Will you help me. How to implement this?.
ReplyDeleteHi,
DeleteHave you inputted the Jquery Library and firstVisitPopup.js between head tag?
thank you for this great article, i will try this tutorial to my blog.
ReplyDelete