title: Changing divs z-index using jQuery focusin and focusout
body: <p>Is there any cleaner and more dynamic way than <a href="http://jsfiddle.net/efr4M/" rel="nofollow" title="1st fiddle">this fiddle</a> to create div popups that change z-index as they become focused and unfocused?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="div1"&gt;&lt;/div&gt;
  &lt;div id="div2"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div {
      width:200px;
      height:200px;
      position:absolute;
      top:0px;
      left:0px;
  }
  #div1 {
      background-color:red;
  }
  #div2 {
      background-color:green;
  }    
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$("#div1").draggable();
  $("#div2").draggable();
  
  $("#div1").mousedown(function () {
      $("#div1").css("z-index", 2);
      $("#div2").css("z-index", 1);
  });
  
  $("#div2").mousedown(function () {
      $("#div1").css("z-index", 1);
      $("#div2").css("z-index", 2);
  });
  </code></pre>
  
  <p>I tried using .blur, .focus, .focusin and .focusout methods but they didn't seem to work for me. I need a few div popups with some input fields inside. The divs will directly inside body.</p>
  
  <p>Here is <a href="http://jsfiddle.net/4CpWs/" rel="nofollow" title="a fiddle">a fiddle</a> that shows how I tried using .focusin and .focusout. I also tried .blur and focus accordingly.</p>
  
  <p>With focusin and focusout:</p>
  
  <pre><code>$("#div1").draggable();
  $("#div2").draggable();
  
  $("#div1").focusin(function () {
      $("#div1").css("z-index", 2);
  });
  $("#div2").focusin(function () {
      $("#div2").css("z-index", 2);
  });
  $("#div1").focusout(function () {
      $("#div1").css("z-index", 1);
  });
  $("#div2").focusout(function () {
      $("#div2").css("z-index", 1);
  });
  </code></pre>
  
  <p>Thanks :)</p>
  
  <p>EDIT:</p>
  
  <p>Ended up using <a href="http://jsfiddle.net/4CpWs/2/" rel="nofollow">Amit Sonis method</a>. Much cleaner than my original :)</p>