API tools faq
paste
Advertisement
Affbuddy

jQuery Exit Pop Script

Affbuddy
Aug 5th, 2016
296
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 4.76 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <!--
  4. Author: Affbuddy
  5. Site: https://affbuddy.com/
  6. Youtube: https://www.youtube.com/watch?v=fQ7xaKfMWcs
  7. -->
  8. <head>
  9. <meta charset="UTF-8">
  10. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11. <meta name="robots" content="noindex, nofollow">
  12. <title>jQuery Exit Pop Script</title>
  13. <link rel="shortcut icon" href="images/favicon.ico">
  14. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  15. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
  16. <style>
  17.     @import url(https://fonts.googleapis.com/css?family=Bangers);
  18.     body {
  19.         text-align: center;
  20.     }
  21.     .header {
  22.         margin: auto;
  23.         margin-bottom: 30px;
  24.         padding-top: 10px;
  25.         height: 120px;
  26.         background-color: #2a3a47;
  27.     }
  28.     .logo {
  29.         margin: auto;
  30.         background-image: url(https://s3.amazonaws.com/affbuddy/logo.png);
  31.         background-repeat: no-repeat;
  32.         width: 315px;
  33.         height: 100px;
  34.     }
  35.     .title {
  36.         font-family: 'Bangers', cursive;
  37.         margin-bottom: 60px;
  38.     }
  39.     .panel {
  40.         margin: auto;
  41.         min-height: 300px;
  42.         max-width: 400px;
  43.         border: 6px dashed #ff0000;
  44.         cursor: pointer;
  45.     }
  46.     .panel-body {
  47.         font-size: 20px;
  48.     }
  49.    
  50.     /* DOWNSELL STYLES */
  51.     .backdrop {
  52.         position: fixed;
  53.         z-index: 998;
  54.         top: 0 !important;
  55.         bottom: 0 !important;
  56.         left: 0;
  57.         width: 100%;
  58.         min-height: 100%;
  59.         background: rgba(0, 0, 0, .5);
  60.     }
  61.     .downsell {
  62.         position: fixed;
  63.         z-index: 999;
  64.         top: 50%;
  65.         left: 50%;
  66.         width: 680px;
  67.         height: 400px;
  68.         margin: -200px 0 0 -340px;
  69.         background-repeat: no-repeat;
  70.         background-position: 50% 0;
  71.         -webkit-box-shadow: 0 0 20px 0 rgba(0,0,0,0.5);
  72.         box-shadow: 0 0 20px 0 rgba(0,0,0,0.5);
  73.         border-radius: 7px;
  74.         cursor: pointer;
  75.     }
  76.     .downsell {
  77.         background-image: url('https://s3.amazonaws.com/affbuddy/downsell.jpg');
  78.     }
  79.     .close-btn {
  80.         position: absolute;
  81.         z-index: 1000;
  82.         top: -10px;
  83.         right: -10px;
  84.         width: 32px;
  85.         height: 32px;
  86.     }
  87.     .hide {
  88.         display: none;
  89.     }
  90. </style>
  91.  
  92. <!--[if IE]>
  93.    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
  94.    <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
  95. <![endif]-->
  96. </head>
  97.  
  98. <body>
  99. <div class="header">
  100.     <div class="container">
  101.         <div class="logo"></div>
  102.     </div>
  103. </div>
  104.  
  105. <div class="container">
  106.  
  107. <h1 class="title">jQuery Exit Pop Script</h1>
  108.  
  109. <div class="panel panel-default" data-href="http://example.com">
  110.   <div class="panel-body">
  111.     <h1>Mega Store Coupon</h1>
  112.     <h2>Save 50% to 90%</h2>
  113.     <br />
  114.     <h2><a href="#">CLICK HERE</a></h2>  
  115.   </div>
  116. </div>
  117.  
  118. </div><!-- container -->
  119.    
  120. <!--DOWNSELL - START-->
  121. <div class="backdrop hide" style="top: 0px;"></div>
  122. <div class="downsell hide" data-href="http://example.com">
  123.     <img class="close-btn" src="https://s3.amazonaws.com/affbuddy/close.png" />  
  124. </div>
  125. <script>
  126.     window.beforeunload_message = "LIMITED TIME SPECIAL OFFER\n\nClick 'STAY ON THIS PAGE' below to activate offer or 'LEAVE THIS PAGE' if you are not interested.";
  127. </script>
  128. <!--DOWNSELL - END-->
  129.  
  130. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  131. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  132. <script>
  133. $(function() {
  134.     window.onbeforeunload = function (e) {
  135.         /* NOTHING TO CHANGE HERE */
  136.         $('.backdrop, .downsell').removeClass('hide');
  137.         var top = $(window).scrollTop();
  138.         $('.backdrop').css({'top': top});
  139.        
  140.         /* CLOSES BACKDROP AND IMAGE ON CLICK
  141.         $('.backdrop, .downsell').click(function() {
  142.             $('.backdrop, .downsell').addClass('hide');
  143.         }); */
  144.        
  145.         /* MAKES DOWNSELL IMAGE INTO A LINK */
  146.         $(".downsell").click(function() {
  147.             window.onbeforeunload = null; // STOPS THE DOWNSELL TRIGGER
  148.             window.location.href = ($(this).data("href"));            
  149.         });
  150.        
  151.         /* NOTHING TO CHANGE HERE */
  152.         e = e || window.event;
  153.         if (e) {
  154.             e.returnValue = window.beforeunload_message;
  155.         }
  156.         return window.beforeunload_message;
  157.     };
  158. });  
  159.  
  160. $(function(){
  161.     /* MAKES PANEL INTO A LINK */
  162.     $(".panel").click(function() {
  163.         window.onbeforeunload = null; // STOPS THE DOWNSELL TRIGGER
  164.         window.location.href = ($(this).data("href"));            
  165.     });
  166. });  
  167.  
  168. </script>
  169. </body>
  170. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!