- Get link
- X
- Other Apps
- Get link
- X
- Other Apps
Pop Up Message is a way to display a some message for users which does not redirect user to another page and keep on same page. It can be done using simple javascript code : alert("Your message");. But, using this simple javascript code will be very annoying for users because it will always be shown when user reload or move to another page.
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.
2. Insert your welcome message between <body> and </body>
3. Call the modal pop up message with jQuery code and paste it between <body> and </body> and below your welcome message.
4. Add this CSS Style between <head> and </head>.
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>
Comments
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