lancememan
4/1/2016 - 5:54 AM

Javascript Pop up on scroll

Javascript Pop up on scroll

<div class="popup">
<div class="close-pop"><i class="fa fa-times"></i></div>
<div class="text-pop">RECEIVE THIS FREE RESOURCE</div>
<div class="col-md-4 text-center img-pop">
   <img src="/good-will/wp-content/uploads/2016/03/lp-3-img-png.png" class="img-responsive">
</div>
<div class="col-md-8 desc-pop">
<strong>2016 Sales Executive Report:</strong>
Top Barriers, Trends and Sales Strategies  Leaders are Implementing.
<div class="btn-pop"><a class="btn btn-primary join-us s-btn" href="/good-will/braintrust-lp-3/">GET MY REPORT NOW</a></div>
</div>
</div>




<script>// <![CDATA[
$(document).scroll(function () {
    var y = $(this).scrollTop();
    if (y > 800) {
        $('.popup').fadeIn();
    } else {
        $('.popup').fadeOut();
    }
});
$( ".close-pop" ).click(function() {
  $('.popup').addClass( "hidden" );
});
$( ".btn-close" ).click(function() {
  $('.popup').addClass( "hidden" );
});
// ]]></script>



<style>
.img-pop {
    padding: 0;
}
.btn-pop {
    margin-top:15px;
}
.desc-pop {
    padding-right: 0;
    font-size:16px;
    color: white;
    line-height: 20px;
}
.desc-pop strong {
    display: inline-block;
    width: 100%;
    font-size:17px;
}
.popup .btn-pop a {
    padding: 7px 20px;
}
.text-pop {
    font-size: 22px;
    margin-bottom: 15px;
    text-align: center;
    color: white;
    font-weight: bold;
    font-family: 'Titillium Web', sans-serif;
}
.close-pop i {
    position: relative;
    color: white;
    font-size: 15px;
    top: -1px;
}
.close-pop{
cursor:pointer;
    position: absolute;
    background-color: #E6E6E6;
    border-radius: 50px;
    width: 27px;
    height: 27px;
    border: 1px solid grey;
    text-align: center;
    right: -10px;
    top: -15px;
    background-color: black;
}
.popup{
    display: none;
    background-image: url('/wp-content/uploads/2016/02/bg-pop.jpg');
    background-size: cover;
    position: fixed;
    bottom: 20px;
    max-width: 500px;
    right: 20px;
    z-index: 9999;
    padding: 15px 20px;
    border-radius: 5px;
    -webkit-box-shadow:0 0 20px rgba(0, 0, 0, 0.41); 
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.41); 
    box-shadow:0 0 20px rgba(0, 0, 0, 0.41);
}
</style>