Create less_aggressive.html

This file sets a custom cookie on modal exit that has a shorter lifetime than the default cookie. The reverse could also be used where a short default cookie is set and when the disable function is called after successful form submit, it would drop a longer dated cookie.
carlsednaoui · Apr 29, 2014 · b10200d · b10200d
1 parent 1df488a
commit b10200d
Showing 1 changed file with 87 additions and 0 deletions.
diff --git a/test/less_aggressive.html b/test/less_aggressive.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>OuiBounce Testing Page</title>
+
+    <!-- Example page base styling -->
+    <!-- Don't worry abou this     -->
+    <style>
+      body {
+        background-color: #F0F1F2;
+        color: #2E4052;
+        min-height: 500px;
+        padding: 0;
+        -webkit-font-smoothing: antialiased;
+        font-family: sans-serif;
+      }
+    </style>
+
+    <!-- Add the OuiBounce CSS & Font -->
+    <link rel="stylesheet" href="ouibounce.min.css">
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
+
+    <!-- Load jQuery -->
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
+
+    <!-- Add OuiBounce JS -->
+    <script src="../build/ouibounce.js"></script>
+  </head>
+
+  <body>
+    <!-- Example page instructions -->
+    <h1>Try leaving this page to fire OuiBounce</h1>
+
+    <!-- OuiBounce Modal -->
+    <div id="ouibounce-modal">
+      <div class="underlay"></div>
+      <div class="modal">
+        <div class="modal-title">
+          <h3>This is a OuiBounce modal!</h3>
+        </div>
+
+        <div class="modal-body">
+          <p>A doge is an elected chief of state lordship, the ruler of the Republic in many of the Italian city states during the medieval and renaissance periods, in the Italian "crowned republics".</p>
+          <p>The word is from a Venetian word that descends from the Latin dux (as do the English duke and the standard Italian duce and duca), meaning "leader", especially in a military context. The wife of a doge is styled a dogaressa. <a href="https://en.wikipedia.org/wiki/Doge" target="blank">[1]</a></p>
+
+          <form>
+            <input type="text" placeholder="[email protected]">
+            <input type="submit" value="learn more &raquo;">
+            <p class="form-notice">*this is a fake form</p>
+          </form>
+        </div>
+
+        <div class="modal-footer">
+          <p>no thanks</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Example page JS        -->
+    <!-- Used to fire the modal -->
+    <script>
+
+      // if you want to use the 'fire' or 'disable' fn,
+      // you need to save OuiBounce to an object
+      var _ouiBounce = ouiBounce(document.getElementById('ouibounce-modal'), {
+        cookieExpire: 10,
+        timer: 0,
+        callback: function() { console.log('ouiBounce fired!'); }
+      });
+
+      $('.underlay').on('click', function() {
+        $('#ouibounce-modal').hide();
+        _ouiBounce.disable({ cookieExpire: 5, sitewide: true });
+
+      });
+
+      $('#ouibounce-modal .modal-footer').on('click', function() {
+        $('#ouibounce-modal').hide();
+        _ouiBounce.disable({ cookieExpire: 5, sitewide: true });
+      });
+
+      $('#ouibounce-modal .modal').on('click', function(e) {
+        e.stopPropagation();
+      });
+    </script>
+  </body>
+</html>