here i'll give the source code for the exit pop up in a page.When a visitor leaves a page we have to show them the pop up message this is really a simple technique to learn on.
the html code will look like this:
<div id="popup" class="popup__wrapper">
<div class="popup__container">
<a class="close" onclick="pop_up_close()">×</a>
<img class="pop_image" src="image.php">
<div class="pop_cont_right">
<h1 class="popup__title">leaving</h1><hr>
<p class="popup_descripton">Did you know that today you can receive up to a 30% discount on Oxford writing pads? ideal to write all your notes on the notebook test</p>
<a class="btn btn-default popup_btn">Iwant discount</a>
<p class="pop_text_close" ><u>some text under the btn</u></p>
</div>
</div>
</div>
next we can add some css to this to make it look good:
#popup {
display: none;
}
.popup__wrapper {
background: rgba(0, 0, 0, .75);
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 99999;
text-align: center;
}
.popup__container {
position: relative;
background: #fff;
font-family: Helvetica, Arial, sans-serif;
margin: 150px auto;
max-width: 55%;
padding: 20px;
/*width: 500px;*/
height: 400px;
border-radius: 3px;
overflow: hidden;
}
.popup__title {
font-size: 26px;
margin-bottom: 15px;
}
#popup .close {
position: absolute;
/*top: 20px;
right: 30px;*/
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
#popup .pop_image{
width: 40%;
height: -webkit-fill-available;
float: left;
cursor: pointer;
}
.pop_cont_right{
width: 60%;
height: -webkit-fill-available;
float: left;
padding-left: 2%;
}
.popup_btn{
margin-top: 10%;
background-color: #ff7200;
font-weight: bold;
color: #fff;
padding: 15px 30px;
}
.popup_btn:hover{
background-color: #ff7200 !important;
color: #fff !important;
}
.pop_text_close{
font-size: 11px;
margin-top: 11px;
cursor: pointer;
}
@media (max-width: 780px){
.popup__container {
height: 365px;
max-width: 65%;
}
.popup__title{
font-size: 20px;
}
.popup_descripton{
font-size: 12px;
}
}
@media (max-width: 440px){
.popup__container {
height: 270px;
max-width: 70%;
}
.popup__title{
font-size: 18px;
margin-bottom: 0px;
}
.popup_descripton{
font-size: 10px;
}
#popup .close{
font-size: 23px;
}
#popup hr{
margin-top: 0;
margin-bottom: 0;
}
}
now the design is over and we want to trigger the pop up when the user takes his cursor near the tabs on top
<script>
$(document).ready(function(){
document.addEventListener("mouseout", onMouseOut);
});
var start = new Date();
//we use this for checking the time to execute the popup like after 3 or 4 seconds of the page load initialize the popup
function onMouseOut(event) {
var end = new Date();
var secondsOpen = Math.floor((end - start) / 1000);
//alert(secondsOpen);
if (
event.clientY < 50 &&
event.relatedTarget == null &&
secondsOpen > 3 &&
event.target.nodeName.toLowerCase() !== 'select') {
// Remove this event listener
document.removeEventListener("mouseout", onMouseOut);
// Show the popup
document.getElementById("popup").style.display = "block";
}
}
</script>
the output will look something like the following
