title: Getting a popup to fadeOut on its own with setTimeout
body: <p>I am attempting to get a pop up to close with a setTimeout function instead of actually having to close it with the close button. I am wanting the timeout time to start once the popup appears.</p>
  
  <p>I tried to do it (the commented out code) and it just kills the script. </p>
  
  <p>What am I doing wrong?</p>
  
  <p>Instead of the click function, what can I use to get this popup to show in a success of an ajax call?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
      //----- OPEN
      $('[data-popup-open]').on('click', function(e)  {
          var targeted_popup_class = jQuery(this).attr('data-popup-open');
          $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
   
          e.preventDefault();
      });
   
      //----- CLOSE
       
    $('[data-popup-close]').on('click', function(e)  {
          var targeted_popup_class = jQuery(this).attr('data-popup-close');
          $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
   
          e.preventDefault();
      });
  });
    
    
  /*   setTimeout(function() {
  ('.newsletter-popup').hide();,4000 );
  });*/</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Outer */
  .newsletter-popup {
      width:100%;
      height:100%;
      display:none;
      position:fixed;
      top:0px;
      left:0px;
      background:rgba(0,0,0,0.75);
  }
   
  /* Inner */
  .popup-inner {
      max-width:700px;
      width:90%;
      padding:40px;
      position:absolute;
      top:50%;
      left:50%;
      -webkit-transform:translate(-50%, -50%);
      transform:translate(-50%, -50%);
      box-shadow:0px 2px 6px rgba(0,0,0,1);
      border-radius:3px;
      background:#fff;
  }
   
  /* Close Button */
  .popup-close {
      width:30px;
      height:30px;
      padding-top:4px;
      display:inline-block;
      position:absolute;
      top:0px;
      right:0px;
      transition:ease 0.25s all;
      -webkit-transform:translate(50%, -50%);
      transform:translate(50%, -50%);
      border-radius:1000px;
      background:rgba(0,0,0,0.8);
      font-family:Arial, Sans-Serif;
      font-size:20px;
      text-align:center;
      line-height:100%;
      color:#fff;
      text-decoration:none;
  }
   
  .popup-close:hover {
      -webkit-transform:translate(50%, -50%) rotate(180deg);
      transform:translate(50%, -50%) rotate(180deg);
      background:rgba(0,0,0,1);
      text-decoration:none;
  }
  #popup-inner-content {
    text-align: center;
    font-size: 2em;
    color: #2a2a2a;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;a class="btn" data-popup-open="popup-1" href="#"&gt;Open Popup #1&lt;/a&gt;
   
  &lt;div class="newsletter-popup" data-popup="popup-1"&gt;
      &lt;div class="popup-inner"&gt;
          &lt;div id="popup-inner-content"&gt;Thanks for subscribing to our newsletter!&lt;/div&gt;
         &lt;!--   &lt;p&gt;&lt;a data-popup-close="popup-1" href="#"&gt;Close&lt;/a&gt;&lt;/p&gt; --&gt;
          &lt;a class="popup-close" data-popup-close="popup-1" href="#"&gt;x&lt;/a&gt; 
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>