title: File uploading popup window
body: <p>I need help for my uploading system.
  I use that purple button, <a href="http://tympanus.net/Development/CreativeButtons/" rel="nofollow">http://tympanus.net/Development/CreativeButtons/</a> ( Scroll down when you see purple buttons ).</p>
  
  <p>And i use that wide, short content popup, <a href="http://codepen.io/ksondere/pen/tAIrl" rel="nofollow">http://codepen.io/ksondere/pen/tAIrl</a> ( Here is JS code and HTML and CSS source codes ).</p>
  
  <pre><code>&lt;form id="fileupload" action="&lt;?php echo site_url( $user-&gt;userURL.'/upload' ) ?&gt;" method="POST" enctype="multipart/form-data"&gt;
      &lt;div id="wrap"&gt;
  
      &lt;div id="main"&gt;
  &lt;div id="droparea"&gt;
  &lt;div class="empty-folder-contents density-tiny"&gt;
  &lt;div class="empty-folder-circle"&gt;&lt;/div&gt;
  &lt;div class="drop-file-icon drive-sprite-aux-image-gray"&gt;&lt;/div&gt;
  &lt;div class="drop-target-contents-text drop-target-contents-inactive"&gt;
      &lt;div class="fileinner"&gt;
          &lt;img class="file" src="img/icon/file.png" /&gt;
  
          &lt;p&gt;
              &lt;label for="upload" class="btn btn-5 btn-5b icon-plus"&gt;Lisa fail&lt;/label&gt;
  &lt;input style="opacity:0" type="file" name="files[]" id="upload" multiple&gt;
          &lt;/p&gt;
          &lt;div class="drop-target-contents-main-title"&gt;või&lt;/br&gt;&lt;/br&gt;lohistage failid siia!&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
      &lt;/div&gt;
  
          &lt;div id="shortModal" class="modal modal-wide fade"&gt;
              &lt;div class="modal-dialog"&gt;
                  &lt;div class="modal-content"&gt;
                      &lt;div class="modal-header"&gt;
                          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                              &lt;h4 class="modal-title"&gt;Failide üleslaadimine&lt;/h4&gt;
                      &lt;/div&gt;
                  &lt;div class="progress progress-danger progress-striped active"&gt;
              &lt;div class="bar" style="width:0%;"&gt;&lt;/div&gt;
          &lt;/div&gt;
              &lt;div class="progress-extended"&gt;&amp;nbsp;&lt;/div&gt;
              &lt;/div&gt;
  &lt;div class="fileupload-loading"&gt;&lt;/div&gt;
      &lt;br&gt;
      &lt;table class="table table-striped"&gt;&lt;tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"&gt;&lt;/tbody&gt;&lt;/table&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;script style="display: none;"&gt;var __links = document.querySelectorAll('label');function __linkClick(e) { parent.window.postMessage(this.href, '*');} ;for (var i = 0, l = __links.length; i &lt; l; i++) {if ( __links[i].getAttribute('target') == '_blank' ) { __links[i].addEventListener('click', __linkClick, false);}}&lt;/script&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  // when .modal-wide opened, set content-body height based on browser height; 200 is appx height of modal padding, modal title and button bar
  
  $(".modal-wide").on("show.bs.modal", function() {
    var height = $(window).height() - 200;
    $(this).find(".modal-body").css("max-height", height);
  });
  &lt;/script&gt;
  &lt;?php endif; ?&gt;
  </code></pre>
  
  <p>I need if i click to that purple button, then its coming automatically popup where is upload progress bars and file names.</p>
  
  <p>Kind regards,
  KLDesigns,</p>