title: Making a javascript popup draggable
body: <p>I am creating a JavaScript popup. The code is as below.</p>
  
  <p><strong>The HTML:</strong></p>
  
  <pre><code>    &lt;div id="ac-wrapper" style='display:none' onClick="hideNow(event)"&gt;
      &lt;div id="popup"&gt;
          &lt;center&gt;
               &lt;h2&gt;Popup Content Here&lt;/h2&gt; 
              &lt;input type="submit" name="submit" value="Submit" onClick="PopUp('hide')" /&gt;
          &lt;/center&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>The CSS:</strong></p>
  
  <pre><code>    #ac-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url("images/pop-bg.png") repeat top left transparent;
      z-index: 1001;
  }
  #popup {
      background: none repeat scroll 0 0 #FFFFFF;
      border-radius: 18px;
      -moz-border-radius: 18px;
      -webkit-border-radius: 18px;
      height: 361px;
      margin: 5% auto;
      position: relative;
      width: 597px;
  }
  </code></pre>
  
  <p><strong>The Script:</strong>   </p>
  
  <pre><code>function PopUp(hideOrshow) {
      if (hideOrshow == 'hide') document.getElementById('ac-wrapper').style.display = "none";
      else document.getElementById('ac-wrapper').removeAttribute('style');
  }
  window.onload = function () {
      setTimeout(function () {
          PopUp('show');
      }, 0);
  }
  
  function hideNow(e) {
      if (e.target.id == 'ac-wrapper') document.getElementById('ac-wrapper').style.display = 'none';
  }
  </code></pre>
  
  <p><strong>The jsFiddle Link:</strong></p>
  
  <p><a href="http://jsfiddle.net/K9qL4/2/" rel="nofollow">http://jsfiddle.net/K9qL4/2/</a></p>
  
  <p><strong>The Issue:</strong></p>
  
  <p>The above script works fine, but I need to make the popUp draggable.</p>