title: Adding a Jquery Modal close button
body: <p>I made a quick modal on jquery so that when I scroll to the bottom of the page I get a popup on the bottom corner. Basically I need to make it only appear when scrolled to that part of the page and it you can have an option to close it. How do I go about adding a close feature? Also is it possible to delay the pop up a few seconds before showing up when scrolled to that part of the page. </p>
  
  <p>Thanks!</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
      &lt;title&gt;Peekaboo&lt;/title&gt;
  
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
  
  
      &lt;style&gt;
  
      html, body {
          margin: 0;
          padding: 0;
      }
      .content {
          display: block;
          min-height: 3000px;
      }
  
      .peekaboo {
          position: fixed;
          right: 0;
          bottom: 0;
          display: block;
          width: 200px;
          height: 150px;
          background-color: red;
          -webkit-transition: all 0.6s ease;
          -o-transition: all 0.6s ease;
          -ms-transition: all 0.6s ease;
          transition: all 0.6s ease;
          bottom: -150px;
      }
      .peekaboo.open {
          bottom: 0;
      }
      &lt;/style&gt;
  
  
      &lt;script&gt;
      $(function() {
  
  
          $(window).scroll(function() {
  
              // calculate the percentage the user has scrolled down the page
              var scrollPercent = ($(window).scrollTop() / $(document).height()) * 100;
  
              if (scrollPercent &gt; 70) {
                  $(".peekaboo").addClass('open');
  
              }
  
          });
  
      });
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div class="content"&gt;
  
  
      &lt;/div&gt;
  
      &lt;div class="peekaboo"&gt;
          Peekaboo!
      &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>