title: What's the best way to limit focusable controls to current dialog?
body: <p>I've a web application with dialogs. A dialog is a simple div-container appended to the body. There is also an overlay for the whole page to prevent clicks to other controls. But: Currently the user can focus controls that are under the overlay (for example an input). Is there any way to limit the tabbable controls to those which are in the dialog?</p>
  
  <p>I am using jQuery (but not using jQueryUI). In jQueryUi dialogs it's working (but I <strong><em>don't</em></strong> want to use jQueryUI). I failed to figure out, how this is accomplished there.</p>
  
  <p>Here is the jQueryUI example: <a href="http://jqueryui.com/resources/demos/dialog/modal-confirmation.html" rel="nofollow noreferrer">http://jqueryui.com/resources/demos/dialog/modal-confirmation.html</a> - The link on the webpage is not focusable. The focus is kept inside the dialog (the user cannot focus the urlbar of the browser using tab).</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;a href="#test" onclick="alert('Oh no!');"&gt;I should not receive any focus&lt;/a&gt;
  &lt;input type="text" value="No focus please" /&gt;
  &lt;div class="overlay"&gt;
      &lt;div class="dialog"&gt;
          Here is my dialog&lt;br /&gt;
          TAB out with Shift+Tab after focusing "focus #1"&lt;br /&gt;
          &lt;input type="text" value="focus #1" /&gt;&lt;br /&gt;
          &lt;input type="text" value="focus #1" /&gt;&lt;br /&gt;
      &lt;/div&gt;
  &lt;/div&gt;    
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.3);
      text-align: center;
  }
  
  .dialog {
      display: inline-block;
      margin-top: 30%;
      padding: 10px;
      outline: 1px solid black;
      background-color: #cccccc;
      text-align: left;
  }
  </code></pre>
  
  <p>Here is my fiddle: <a href="http://jsfiddle.net/SuperNova3000/weY4L/" rel="nofollow noreferrer">http://jsfiddle.net/SuperNova3000/weY4L/</a></p>
  
  <p>Does anybody have an idea? I repeat: I don't want to use jQueryUI for this. I'd like to understand the underlying technique.</p>