Exit Pop up

Exit Pop up on leaving the page

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