title: Show Previous and Next icon over popup image
body: <p>I want to show next and previous on over the pop up images. Unfortunately, the icon still stay behind the popup image. I have set the z-index to it but it still stay behind the pop up.
  html:</p>
  
  <pre><code>&lt;div class="row-fluid"&gt;
      &lt;div class="col-sm-12"&gt;
          &lt;ul class="image-list"&gt;
              &lt;li&gt;&lt;img src="photos/g1.jpg" alt="Photo number 1" class="img-responsive img-thumbnail" onclick="view(this.src)"/&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="photos/g2.jpg" alt="Photo number 2" class="img-responsive img-thumbnail" onclick="view(this.src)"/&gt;&lt;/li&gt;
          &lt;/ul&gt;
           &lt;div class="navigation" id="nav"&gt;
              &lt;span class="previous glyphicon glyphicon-arrow-left" id="prev" onclick="prev()"&gt;&lt;/span&gt;
              &lt;span class="next glyphicon glyphicon-arrow-right" id="next" onclick="next()"&gt;&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.pup
      {
          width: 100%; height: 100%;
          background: #666;
          opacity: 0.7;
          position: fixed;
          top: 0px; left: 0px;
          z-index: 111;
          display: none;
      }
      .viewer{
          background: #666; padding: 12px;
          position: fixed; z-index: 222;
          text-align: center;
          display: none;
      }
      #nav{
          display: none;
          background:red;
          z-index: 333;
          color: #FFF;
      }
  </code></pre>
  
  <p>javscript</p>
  
  <pre><code>function view(src)
          {
              var viewer = document.getElementById("viewer");
              viewer.innerHTML ='&lt;img src="' + src + '" id="img"/&gt;';
              var img = document.getElementById("img");
              var iw=0, ih=0;
              var dw=0, dh=0;
              img.onload=function(){
                  document.getElementById("ov").style.display="block"; 
                  viewer.style.display="block";
                  document.getElementById("nav").style.display="block";
                  iw = viewer.offsetWidth;
                  ih = viewer.offsetHeight;
                  dw = window.innerWidth;
                  dh = window.innerHeight;
                  viewer.style.top = parseInt(dh/2-ih/2) + "px";
                  viewer.style.left = parseInt(dw/2-iw/2) + "px";
              };
          }
          function hide2()
          {
              document.getElementById("viewer").style.display="none";
              document.getElementById("ov").style.display="none";
              document.getElementById("nav").style.display="none";
          }
  </code></pre>