title: Focus selector, keep focus on popup
body: <p>Morning, I have an issue with the styling of a popup window I am trying to create, when a button is clicked, the popup is shown and keeps focus when clicking on the popup body, although when clicking a child element of the popup within it, the popup loses focus.</p>
  
  <p>How can I keep focus on the popup when clicking any child element within the popup?</p>
  
  <p>Many Thanks.</p>
  
  <pre><code>     &lt;html&gt;
         &lt;head&gt;
  
  &lt;style type="text/css"&gt;
  #modal{display:none;}
  #modal:focus {display:block;}
  #modal:focus * #modal{display:block;}/*i thought maybe this would apply when any child element of #modal has          focus, although if i give a child element of modal a tabindex, it still doesn't work.*/
  .num:focus + #modal{display:block;}
   &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="onetwo"&gt;
   &lt;input type="button" id="btn1" class="num" tabindex="1" value="Click here"/&gt;
  &lt;div id="modal" style="background-color:green;width:200px;height:200px;
  position:absolute;top:40%;left:40%;" tabindex="2"&gt;
  &lt;input type="button" id="btn1" onclick="alert("Alerted")" value="Click.."/&gt;
  &lt;input type="text" id="txt1" placeholder="some text"/&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>